我如何在 react.js 组件中使用 Bootstrap 5 Popover?
How can i use Bootstrap 5 Popover in react.js component?
我在反应中使用 CDN 的 Bootstrap 5。我有一个组件将在其中一个反应组件中使用 Popover。因此,根据文档,它说“您必须在 bootstrap.js 之前包含 popper.min.js 或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 才能使弹出框工作!”
并且要初始化页面上的所有弹出窗口,请使用给定的 javascript 代码:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
但是我无法在我的 React 组件中的 useEffect 中使用它,因为它返回了我的 React 组件中未定义的“bootstrap.Popover(popoverTriggerEl)”对象。
请问有人可以指导我吗?
现在 Bootstrap 5 is modular,您可以导入组件,或直接从 bootstrap
...
引用它们
var popover = new bootstrap.Popover(document.querySelector('#myButton'), options)
所以要将它与 React useEffect
hook 一起使用,你可以这样做......
function PopoverDemo() {
const popoverRef = useRef()
useEffect(() => {
var popover = new bootstrap.Popover(popoverRef.current, {
content: "Hello popover content!",
title: "My Popover"
})
})
return (
<div className="p-4">
<button className="btn btn-lg btn-danger" ref={popoverRef}>
Click to toggle popover
</button>
</div>
)
}
我在反应中使用 CDN 的 Bootstrap 5。我有一个组件将在其中一个反应组件中使用 Popover。因此,根据文档,它说“您必须在 bootstrap.js 之前包含 popper.min.js 或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 才能使弹出框工作!”
并且要初始化页面上的所有弹出窗口,请使用给定的 javascript 代码:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
但是我无法在我的 React 组件中的 useEffect 中使用它,因为它返回了我的 React 组件中未定义的“bootstrap.Popover(popoverTriggerEl)”对象。
请问有人可以指导我吗?
现在 Bootstrap 5 is modular,您可以导入组件,或直接从 bootstrap
...
var popover = new bootstrap.Popover(document.querySelector('#myButton'), options)
所以要将它与 React useEffect
hook 一起使用,你可以这样做......
function PopoverDemo() {
const popoverRef = useRef()
useEffect(() => {
var popover = new bootstrap.Popover(popoverRef.current, {
content: "Hello popover content!",
title: "My Popover"
})
})
return (
<div className="p-4">
<button className="btn btn-lg btn-danger" ref={popoverRef}>
Click to toggle popover
</button>
</div>
)
}