如何在react.js组件中使用Bootstrap 5 Popover

Question

我在react中通过CDN使用Bootstrap 5。我有一个组件将在其中一个反应组件中使用Popover。因此，根据文件，它说"；您必须在bootstrap.js之前包含popper.min.js，或者使用包含popper的bootstrap.bundle.min.js/bootstrap.bundle.js，popover才能工作">

还要初始化页面上的所有弹出窗口，请使用给定的javascript代码：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

但我无法在我的react组件中使用useEffect，因为它正在返回"；独自创立Popover(popoverTriggerEl("；对象，该对象在我的react组件中未定义。

请有人能指导我做这件事吗？

Answer 1

现在Bootstrap 5是模块化的，您可以导入组件，或者直接从bootstrap引用它们。。。

var popover = new bootstrap.Popover(document.querySelector('#myButton'), options)

因此，要将它与ReactuseEffect挂钩一起使用，您可以执行以下操作。。。

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