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

【问题标题】：How can i use Bootstrap 5 Popover in react.js component?如何在 react.js 组件中使用 Bootstrap 5 Popover？
【发布时间】：2021-04-04 10:28:18
【问题描述】：

我在反应中使用 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)”对象。

请问有人可以指导我吗？

【问题讨论】：

标签： reactjs dom react-bootstrap virtual-dom bootstrap-5

【解决方案1】：

现在有了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>
  )
}

Codeply

【讨论】：