twitter-bootstrap - 如何插入 bootstrap.js 来 react 应用程序？

Question

如何使用 webpack 插入 twitter-bootstrap js 文件来 react 应用程序？

我知道像reactstrap和react-bootstrap这样的react库，但我想知道如何在没有这些库的情况下插入bootstrap.js文件。

Answer 1

您可以通过 npm/yarn 安装 Bootstrap 和 jQuery:

npm install bootstrap jquery

然后在顶级 React 文件(入口点)中导入 Bootstrap:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

当然，您需要适当的 Webpack 规则来转换 CSS。

在 React 中使用 Bootstrap 的问题是它需要 jQuery，而现在你有两件事与 DOM 混在一起，这会带来麻烦。这就是 Reactstrap(针对 Bootstrap 4)和 React-Bootstrap(现在也支持 Bootstrap 4)的真正值(value)主张；他们消除了对 jQuery 的依赖，并将功能实现为 React 组件。我强烈建议您利用这些项目的成果；尝试将 jQuery 与 React 结合起来，你就会遇到麻烦。这是可能的;我已经做到了；我不推荐它。