从react引导程序导入组件

Importing components from react-bootstrap

本文关键字：组件 导入 引导程序 react      更新时间：2023-09-26

我正在努力了解如何使用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要容易得多。。

React Bootstrap经过优化，可与Webpack或Browserify等工具配合使用。当您获取我们提供的缩小版分发版时，您将被迫下载整个库，即使您不一定在应用程序中使用所有库。想要了解这些工具的好处，请查看Pete Hunt-Instagram的工作原理。

如果这是一个你还没有准备好探索的选项，你可以将ReactBootstrap变量重新分配给像var rb = ReactBootstrap;这样需要较少键入的较短的变量。

我理解你对原始引导与反应引导的简单性的担忧。尽管在使用React时，React Bootstrap对各种Bootstrap组件的JavaScript实现是以惯用的React方式完成的，这比使用JavaScript Bootstrap提供的要容易得多。

相关文章：