如何在 reactjs 组件中使用 bootstrap 5 popover答案

【问题标题】：how to use bootstrap 5 popover in reactjs components如何在 reactjs 组件中使用 bootstrap 5 popover
【发布时间】：2022-11-10 04:24:04
【问题描述】：

我看过很多视频，人们使用

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

仅在 HTML 文件中。我还没有找到人们在 reactjs 文件中激活弹出框的任何博客或视频。请给我一些例子..由于这个弹出窗口，我真的陷入了我的给定任务。请有人建议我一个很好的例子。

【问题讨论】：

reactstrap.github.io

标签： javascript reactjs bootstrap-popover

【解决方案1】：

我知道这篇文章落后了几个月，但我也很难找到一个例子。几个小时后，我终于弄明白了。

这是我发现的工作：使用npm install bootstrap 安装引导程序

在您的 Index.js 文件中包括：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

在您要使用弹出框的页面或组件中包括：

import { Popover } from 'bootstrap/dist/js/bootstrap.esm.min.js';

使用 useEffect 包括：

useEffect(() => {
    Array.from(document.querySelectorAll('button[data-bs-toggle="popover"]'))
      .forEach(popoverNode => new Popover(popoverNode))
})

最后在你的回报中使用任何会触发弹出框的东西：

<button type="button" 
        class="btn btn-dark me-2" 
        data-bs-container="body" 
        data-bs-toggle="popover" 
        data-bs-placement="left" 
        title="I am popover"
        data-bs-content="Left popover">
              Popover on left
</button>

我在 codepen 中有一个工作示例，但不要简单地从 codepen 复制/粘贴，因为它在导入时遵循不同的规则：

Popover Snippet

帮助我的资源：

How to import Popover