问题描述
我在反应中使用 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
钩子一起使用,你可以做这样的事情......
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>
)
}