将 Bootstrap 与 React 结合使用

Question

对不起，我缺乏知识，但我是新手，目前正在学习 React。我只是想问一下，如果我想在我的 React 应用程序中使用 Bootstrap 4，我必须安装 jQuery 吗？我在某处读到，将 jQuery 与 React 结合使用是不行的。所以现在我想知道。谢谢回复。非常感谢您的意见和建议。

Answer 1

某些功能如下拉、模态需要 JS 来操作 DOM，而 bootstrap 使用 jQuery 来处理 DOM 操作。

但是，React 使用虚拟 DOM，因此通过 jQuery 在 React 应用程序外部操作浏览器 DOM 意味着 React 可能不再处理状态、事件和 UI 渲染。 React 广泛地期望/假设没有其他东西会修改 DOM。

---

这就是为什么推荐react-bootstrap或reactstrap的原因。 CSS 保持完全相同，但重写了最初需要 jQuery 的组件。

以this bootstrap 4 modal为例，您需要定义

modal

状态来确定模态是显示还是隐藏。

本质上，这些 React 引导程序库将每个引导程序组件重写为 React 组件，在 CSS 方面完全相同。

Answer 2

你应该使用 react-bootstrap。相反，您可以使用 npm 安装它：$npm install --save react-bootstrap 在此链接上找到更多信息

请记住它使用 Bootstrap v3。

快乐的编码！

Answer 3

2020 年更新 - Bootstrap 5

Bootstrap 5 不再需要 jQuery 并且是 modular 所以你可以像任何其他 JS 模块一样 @import 它，这使得它更容易与 React 一起使用。这也意味着您可以使用 Bootstrap without 像 reactstrap 或 react-bootstrap 这样的第三方库。

此外，您还可以导入组件并直接引用它们。例如：

const popover = new Popover(document.querySelector('#myButton'), options)

这使得将 Bootstrap 5 与 React 16.8+

useEffect

和

useState

钩子一起使用变得更加容易。为了避免在 React 中直接操作 DOM，使用

useRef

钩子获取元素实例...

function PopoverDemo() {
  const popoverRef = useRef()
  useEffect(() => {
    var popover = new Popover(popoverRef.current, {
        content: "Hello popover content!",
        title: "My Popover",
        trigger: 'hover'
    })
  })

  return (
    <div className="py-2">
        <button className="btn btn-danger" ref={popoverRef}>
            Hover for popover
        </button>
    </div>
  )
}

带有 React 演示的 Bootstrap 5