我尝试指导:

npm install bootstrap
npm install jquery popper.js

然后在src/index.js中:

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();

下面是我用npm的bootstrap 4所做的工作

安装jquery, popper.js, bootstrap包 NPM安装jquery popper.js bootstrap—save 使用以下导入更新index.js 导入“引导/ dist / css / bootstrap.min.css”; 导入“引导/ dist / js / bootstrap.js”;

此外，如果您使用sass自定义样式，您可以安装sass包

npm install sass --save

你不能在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 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，你也可以仔细阅读这个链接

在这里阅读

某种程度上，公认的答案是只谈论包括css文件从bootstrap。

但是我认为这个问题和这个有关 引导下拉在React中不工作

有几个答案可以帮助你

https://stackoverflow.com/a/52251319/4266842 https://stackoverflow.com/a/54188034/4266842

引导5(更新2021年)

Bootstrap 5是模块化的，不再需要jQuery。因此，您可以导入Bootstrap组件并直接从Bootstrap引用它们。这意味着你不再需要像react-bootstrap或reactstrap这样的第三方库。

使用React + Bootstrap 5:

1_安装bootstrap并将其添加到package.json…

npm install 'bootstrap' --save

2_导入bootstrap和/或特定组件…

import { Collapse, Popover, Toast, Tooltip, Alert, Modal, Dropdown } from bootstrap

3_使用Bootstrap组件。例如，这里是下拉菜单…

// component
const DropdownDemo = () => {
    const ddRef = useRef()  

    useEffect(() => {
        var dd = new Dropdown(ddRef.current, {})
    })
    
    return (
        <div className="py-2">
            <div className="dropdown">
              <button className="btn btn-secondary dropdown-toggle" type="button" ref={ddRef} aria-expanded="false">
                Dropdown button
              </button>
              <ul className="dropdown-menu" aria-labelledby="dropdown1">
                <li><a className="dropdown-item" href="#">Action</a></li>
                <li><a className="dropdown-item" href="#">Another action</a></li>
                <li><a className="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
    )
}

// React app
function App() {
  const [mounted, setMounted] = useState(true);

  return (
    <div>
        {mounted &&
            <div>
                <DropdownDemo />
            </div>
        }
    </div>
  )
}