从react-bootstrap导入组件

Question

我正在尝试理解如何使用react-bootstrap。我在我的index.html中导入了整个js文件，如下所示

<!-- 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对各种引导程序组件的JavaScript实现是以惯用的React方式完成的，这比使用JavaScript Bootstrap提供的要容易得多。