要使下拉菜单和其他 js 内容在 4th Bootstrap 中工作，您只需按照以下步骤操作：使用 npm 安装到依赖项：

npm i --save bootstrap jquery popper.js

将它添加到 index.js

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import $ from 'jquery';
import Popper from 'popper.js';

所有步骤都从这里开始

这是因为您已经添加了 HTML 和 CSS，但没有为其添加 js。当您单击下拉菜单时，您的代码不知道该怎么做。这是您必须如何执行此操作的示例。和下面的代码：

class Dropdown extends React.Component {
  state = {
    isOpen: false
  };

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });

  render() {
    const menuClass = `dropdown-menu${this.state.isOpen ? " show" : ""}`;
    return (
      <div className="dropdown" onClick={this.toggleOpen}>
        <button
          className="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-toggle="dropdown"
          aria-haspopup="true"
        >
          Dropdown
        </button>
        <div className={menuClass} aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item" href="#nogo">
            Item 1
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 2
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 3
          </a>
        </div>
      </div>
    );
  }
}

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

经过长时间的搜索和调整，我在这里得到了答案

你只需要添加一个 css 来解决这个问题。当您单击下拉按钮时，它会向该元素添加一个“显示”类，并且根据引导程序，这足以使下拉按钮工作。

.show>.dropdown-menu {
  display: block;
  position: absolute;
}

对我来说，它就像魅力一样。

我尝试了@teimurjan 解决方案，它对我有用，但有两个问题

1. 我必须管理一个状态，即使它不需要
2. 单击下拉菜单后，展开的菜单不会在单击正文或其他任何地方时消失。

将引导程序添加为module -

npm i --save bootstrap

根据我的经验，请将此行添加到您的index.js并重试 -

import 'bootstrap';

让我知道事情的后续。

对我来说，这个问题是通过使用 Bootstrap 4.5 而不是 Bootstrap 5 解决的。

要使用纱线执行此操作，请编写：

yarn remove bootstrap
yarn add bootstrap@^4.5

在 index.js 中，我只是像这样导入它。

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