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

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

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

以这个 bootstrap 4 modal为例，你需要定义modalstate 来决定该 modal 是显示还是隐藏。

所以本质上这些react引导库将每个引导组件重写为一个 React 组件，CSS 明智的它完全相同。

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

请记住，它使用 Bootstrap v3。

快乐编码！

2020 年更新 - Bootstrap 5

Bootstrap 5 不再需要 jQuery 并且是module化的，所以你可以像任何其他 JS module一样 @import 它，这使它更容易与 React 一起使用。这也意味着你可以在没有像 reactstrap 或 react-bootstrap 这样的第三方库的情况下使用 Bootstrap 。

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

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

这使得在 React 16.8+useEffect和useStatehooks 中使用 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>
  )
}

带有 React 演示的 Bootstrap 5