从react-bootstrap导入组件

Question

我正在尝试了解如何使用react-bootstrap。 我在js：

中导入了整个index.html文件

<!-- react-bootstrap -->
<script src="lib/react-bootstrap/dist/react-bootstrap.min.js"></script>

在另一个js文件中，我正在创建一个Navbar，我发现我必须从ReactBootstrap创建一个变量，如下所示：

var Navbar = ReactBootstrap.Navbar;
...
const MyNavBar = (
  <Navbar className="navbar-dark" fluid>
    ...
  </Navbar>
);

我是否需要为我想要的每个组件使用它？如果是这样，似乎正常Bootstrap css更容易..

Answer 1

React-Bootstrap已针对Webpack或Browserify等工具进行了优化。当您获取我们提供的缩小版本时，即使您未必在应用程序中使用所有库，也必须下载整个库。为了大大减少这些工具结帐的好处Pete Hunt - How Instagram Works。

如果这是一个您尚未准备好探索的选项，则可以将ReactBootstrap变量重新指定为更短的内容，例如var rb = ReactBootstrap;，而不需要更少的输入。

我理解您对原始Bootstrap与React-Bootstrap的简单性的关注。虽然在使用React时，React-Bootstrap的各种Bootstrap组件的JavaScript实现是以惯用的React方式完成的，这比使用JavaScript Bootstrap提供的要容易得多。