我在 react 中使用 CDN 的 Bootstrap 5。我有一个组件将在其中一个 react 组件中使用 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 中使用它,因为它返回的是“bootstrap.Popover(popoverTriggerEl)”对象,该对象在我的 React 组件中未定义。
请问有人可以指导我吗?
最佳答案
现在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>
)
}
关于reactjs - 我如何在 react.js 组件中使用 Bootstrap 5 Popover?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65464253/