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

Question

我看过很多视频，人们

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

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

Answer 1

我知道这篇文章已经晚了几个月了，但我也很难找到这样的例子。几个小时后我终于弄清楚了。

这是我发现有效的：
使用 npm install bootstrap 安装 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

对我有帮助的资源：

如何导入 Popover

类似的 StackOverflow 问题

Bootstrap 5 Popover 文档