如何在 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方法中，放在一个我正在渲染工具提示的类中

但是我收到错误

"引导程序"未定义 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())
}

反应引导工具提示示例

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>
   

Answer 3

当将 Bootstrap 与 React 一起使用时，强烈建议使用 React-Bootstrap。

React-Bootstrap 有一个OverlayTrigger组件和一个Tooltip组件，可用于添加可悬停的工具提示。

在您的情况下，它看起来像这样

<OverlayTrigger
placement={'top'}
delay={{ show: 250, hide: 400 }}
overlay={
<Tooltip>
Tooltip on top
</Tooltip>
}
>
<i className="bi bi-align-center" />
</OverlayTrigger>

Answer 4

这是在 react 中使用工具提示的正确指南

通过 npm 或 yarn 安装 Bootstrap：

使用 npm：

npm install bootstrap

使用纱线：

yarn add bootstrap

在主应用程序文件中导入必要的 CSS 和 JavaScript 文件(例如，index.js)：

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import './index.css'; // Your custom CSS if needed
import App from './App'; // Your main React component
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

现在你可以在 React 组件中使用 Bootstrap 的工具提示功能：

import React, { useRef, useEffect } from 'react';
const MyComponent = () => {
const tooltipRef = useRef(null);
useEffect(() => {
const tooltip = new window.bootstrap.Tooltip(tooltipRef.current, {
container: 'body',
trigger: 'hover',
});
return () => {
tooltip.dispose();
};
}, []);
return (
<div>
<button ref={tooltipRef} data-bs-toggle="tooltip" title="This is a tooltip message">
Hover me for a tooltip
</button>
<span ref={tooltipRef} data-bs-toggle="tooltip" title="Another tooltip message">
Hover me for another tooltip
</span>
</div>
);
};
export default MyComponent;

在此示例中，我们利用useRef挂钩获取对需要工具提示的元素的引用，并利用useEffect挂钩来处理组件装载和卸载时的工具提示初始化和清理。

虽然我们在这个演示中使用了bootstrap[v5+]，但你也可以选择专用的 React Bootstrap 库/包，例如react-bootstrap。

Answer 5

要在 React 中使用 bootstrap，建议使用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组件，这都是相同的

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