我在 React 中使用 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)
})
但我无法在我的反应组件中的 useEffect 中使用它,因为它返回“bootstrap.Popover(popoverTriggerEl)”对象,该对象在我的反应组件中未定义。
请问有人可以指导我吗?
现在Bootstrap 5 是模块化的 https://getbootstrap.com/docs/5.0/getting-started/javascript/#using-bootstrap-as-a-module,您可以导入组件,或直接引用它们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>
)
}
Codeply https://codeply.com/p/p5euzBO22C
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)