因为Bootstrap/Reactstrap已经发布了他们的最新版本，即Bootstrap 4，你可以按照以下步骤使用它

导航到您的项目 打开终端 我假设已经安装了npm，然后输入以下命令 NPM install——save react-dom

这将在您的项目中作为依赖项安装Reactstrap。

下面是使用react创建按钮的代码

import React from import {Button} from 'reactstrap'; 导出默认值(props) => { 回报( <按钮颜色= "危险" >危险!< / >按钮 ）; };

你可以通过访问他们的官方页面来检查Reactstrap

你可以直接通过

$ npm install --save react react-dom
$ npm install --save react-bootstrap

然后从bootstrap导入你真正需要的东西，比如:

import Button from 'react-bootstrap/lib/Button';

/ /或

import  Button  from 'react-bootstrap';

你还可以安装:

npm install --save reactstrap@next react react-dom

点击这里查看。

关于CSS，你也可以仔细阅读这个链接

在这里阅读

简单解决方案(2020)如下:-

保存jquery popper.js NPM install -save bootstrap 样式加载器css-loader 更新webpack.config.js，你必须告诉webpack如何处理引导CSS文件，因此你必须添加一些规则，如所示

在你的React应用程序的入口点(通常是index.js)添加一些导入，把它们放在顶部，确保你没有改变顺序。

导入“bootstrap/dist/css/bootstrap.min.css”;

从jquery中导入$;

import Popper from " Popper .js";

import "bootstrap/dist/js/bootstrap.bundle.min";

这些步骤应该可以帮助你，如果有什么问题请评论。

通过npm，你会运行以下程序

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

如果bootstrap为4，也添加依赖项popper.js

npm install popper.js --save

将以下内容(作为一个新对象)添加到webpack配置中

loaders: [
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

将以下内容添加到索引或布局中

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

你不能在React应用程序中使用基于Jquery的Bootstrap Javascript组件，因为任何试图在React之外操作DOM的行为都被认为是糟糕的做法。在这里你可以阅读更多关于它的信息。

如何在React应用程序中包含Bootstrap:

1)推荐。您可以包括Bootstrap的原始CSS文件作为其他答案指定。

2)看看react-bootstrap库。它是专门为React编写的。

3) Bootstrap 4有反作用带

奖金

这些天我通常避免使用Bootstrap库，因为它提供了随时可用的组件(上面提到的react-bootstrap或reactstrap等等)。当您变得依赖于它们所采用的道具时(您不能在其中添加自定义行为)，您就失去了对这些组件生成的DOM的控制。

所以要么只使用Bootstrap CSS，要么不使用Bootstrap。一般的经验法则是:如果你不确定你是否需要它，你就不需要它。我见过很多应用程序，其中包括Bootstrap，但只使用少量的CSS，有时大部分CSS被自定义样式覆盖。

npm install --save bootstrap 

并将此import语句添加到index.js文件中

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

或者你可以简单地在index.html文件中添加CDN。