如何在反应中使用bootstrap5工具提示

Question

我已经用引导包来响应项目了。

// npm install bootstrap@next
// npm install bootstrap-icons
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap-icons/font/bootstrap-icons.css'

那么我就有了工具提示元素

<i className="bi bi-align-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"></i>

文档说，为了启用引导工具提示，我们必须执行这个javascript

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

因此，我将代码放入componentDidMount方法中，在一个类中呈现工具提示

但我搞错了

“引导”未定义为no-undef。

或者当我将导入标记调整为

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

我又犯了一个错误

Cannot read property 'Tooltip' of undefined

所以我很困惑如何启用这个工具提示？

Answer 1

您不需要使用react引导，因为引导5现在是香草JavaScript.

您可以导入像这样的引导5JS组件(注意.esm版本的模块化进口).

import { Tooltip } from 'bootstrap.esm.min.js'

然后你就可以引用这样的工具提示..。

  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs- 
  toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new Tooltip(tooltipTriggerEl)
  })

工具提示示例

Answer 2

这是我的香草TypeScript版。

1. 安装和导入引导程序和类型 npm @类型/引导引导 导入“引导”导入“引导/dist/css/bootstrap.css”
2. 创建Tooltip组件 从“引导”导入反应导入{ Tooltip作为BsTooltip }，从“new”导出const = (p：{子类: JSX.Element，text: string}) => { const childRef = useRef (未定义为未知元素) useEffect(() => { const t=新BsTooltip(childRef.current，{ title: p.text，放置："right“)，触发器：“悬停”}返回() => t.dispose() }，p.text)返回React.cloneElement(p.children，{ ref: childRef }) }
3. 使用 我的纽扣

Answer 3

对于在React中使用引导程序，建议使用react-bootstrap。

将其集成到项目中的步骤如下：

1. 通过通过终端添加包在项目中安装引导程序：npm install react-bootstrap bootstrap
2. 将此添加到您的App.js中。
3. import 'bootstrap/dist/css/bootstrap.min.css';
4. 通过导入工具提示在组件中添加工具提示，如下所示：import { Tooltip} from 'react-bootstrap';

每个react-bootstrap 组件都是相同的

React引导工具提示文档：https://react-bootstrap.github.io/components/overlays/#tooltips