将 Bootstrap 4 与 React 一起使用答案

【问题标题】：Use Bootstrap 4 with React将 Bootstrap 4 与 React 一起使用
【发布时间】：2020-12-31 22:18:41
【问题描述】：

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

【问题讨论】：

您确实需要 jQuery 来实现一些 Bootstrap 功能（如列表项选项卡等），但没有它应该没问题。如果您确实想要在 React 应用程序中使用 Bootstrap 的全部功能，请参阅 here。
我试图避免将 JQuery 与 react 一起使用，因为根据我目前所读到的内容，这是一种不好的做法。但是我想使用 bootstrap 4 中的一个主题，所以我想知道我是否需要使用 JQuery 才能使用该主题。
正如杰克所说，jQuery 仅用于与组件的一些交互，因此您可以在没有组件的情况下弄清楚。但是你可以使用 css 部分，看看这个article。 ps：@import "~bootstrap"
reactstrap.github.io 似乎是引导程序 4 的 JS 部分的反应端口

标签： javascript reactjs react-bootstrap

【解决方案1】：

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

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

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

以this bootstrap 4 modal 为例，需要定义modal 状态来决定模态框是显示还是隐藏。

所以本质上这些 react 引导库将每个引导组件重写为一个 React 组件，在 CSS 方面它是完全一样的。

【讨论】：

react-bootstrap (react-bootstrap.github.io) 现在支持 bootstrap 4.5 版
@coder247 感谢您的提醒。这个答案是在 react-bootstrap 仅支持 bootstrap v3 时编写的。我已经相应地更新了我的答案。

【解决方案2】：

您应该希望使用 react-bootstrap。相反，您可以使用 npm 安装它： $npm install --save react-bootstrap Find more about it on this link

请记住，它使用 Bootstrap v3。

编码愉快！

【讨论】：

有积极的工作让它与 Bootstrap 4 一起工作，可以在 github.com/react-bootstrap/react-bootstrap/projects/1 进行跟踪

【解决方案3】：

2020 年更新 - Bootstrap 5

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

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

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

这使得使用带有 React 16.8+ useEffect 和 useState 钩子的 Bootstrap 5 变得更加容易。为了避免在 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>
  )
}

Bootstrap 5 with React Demo

【讨论】：