如何在react中使用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方法中，在我渲染工具提示的类中

但我收到错误

'bootstrap' 未定义 no-undef

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

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

我收到另一个错误

Cannot read property 'Tooltip' of undefined

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

Answer 1

你根本不需要使用react-bootstrap，因为Bootstrap 5现在是普通的 JavaScript...

您可以像这样导入 Bootstrap 5 JS 组件（注意模块化导入的 .esm 版本）...

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

那么你可以像这样参考工具提示......

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    return () => {
      tooltipList.map(t => t.dispose())
    }

React Bootstrap 工具提示示例

Answer 2

这是我的普通 TypeScript 版本。

1. 安装并导入引导程序和类型

   npm i @types/bootstrap bootstrap
   

   import "bootstrap"
   import "bootstrap/dist/css/bootstrap.css"
   

2. 创建Tooltip组件

   import { Tooltip as BsTooltip } from "bootstrap"
   import React, { useEffect, useRef } from "react"
   
   export const Tooltip = (p: {children: JSX.Element, text: string}) => {
       const childRef = useRef(undefined as unknown as Element)
   
       useEffect(() => {
           const t = new BsTooltip(childRef.current, {
               title: p.text,
               placement: "right",
               trigger: "hover"
           })
           return () => t.dispose()
       }, [p.text])
   
       return React.cloneElement(p.children, { ref: childRef })
   }
   

3. 使用

   <Tooltip text="Tooltip text">
       <button className="btn btn-primary" type="button">My button</button>
   </Tooltip>