React中Bootstrap Dropdown组件失效，显示为普通按钮求解决方案

我之前在React项目里用Bootstrap下拉按钮时也踩过这个坑！光写对HTML结构可不够，Dropdown的交互需要Bootstrap的JavaScript支持，而且在React环境下还有些需要注意的地方，给你几个解决方案：

1. 确认Bootstrap JS依赖已正确引入 #

Bootstrap的Dropdown组件依赖JavaScript来触发下拉行为，它需要jQuery和Popper.js（Bootstrap 5中用的是Popper.js v2）的支持。

• 如果是通过本地文件引入：
  要确保引入顺序正确，先加载jQuery和Popper.js的本地文件，再加载Bootstrap JS的本地文件。
• 如果是npm安装：
  先安装依赖：

  npm install jquery @popperjs/core bootstrap
  

  然后在项目入口文件（比如index.js）中引入：

  import 'bootstrap/dist/css/bootstrap.min.css';
  // bootstrap.bundle.min.js已包含Popper.js，无需单独引入
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  

2. 改用React Bootstrap组件库（更推荐） #

原生Bootstrap的JS基于jQuery，而React使用虚拟DOM，直接混用容易触发DOM操作冲突。专门为React封装的React Bootstrap库完全用React实现，不需要依赖jQuery，是更适配的方案：

• 先安装依赖：

  npm install react-bootstrap bootstrap
  

• 在组件中使用Dropdown组件：

  import { DropdownButton, Dropdown } from 'react-bootstrap';
  
  function MyDropdown() {
    return (
      <DropdownButton
        id="dropdownMenuButton"
        title="Dropdown button"
        variant="secondary"
      >
        <Dropdown.Item href="#">Action</Dropdown.Item>
        <Dropdown.Item href="#">Another action</Dropdown.Item>
        <Dropdown.Item href="#">Something else here</Dropdown.Item>
      </DropdownButton>
    );
  }
  
  export default MyDropdown;
  

• 别忘了在入口文件引入Bootstrap的CSS：

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

3. 检查Bootstrap版本对应的data属性 #

如果你坚持使用原生Bootstrap的HTML结构，要注意不同版本的data属性差异：

• Bootstrap 5中，所有原生交互的data属性都添加了bs-前缀，所以你的代码需要把data-toggle改成data-bs-toggle：

  <div className="dropdown">
    <button 
      className="btn btn-secondary dropdown-toggle" 
      type="button" 
      id="dropdownMenuButton" 
      data-bs-toggle="dropdown"  {/* 这里改成data-bs-toggle */}
      aria-haspopup="true" 
      aria-expanded="false"
    >
      Dropdown button
    </button>
    <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a className="dropdown-item" href="#">Action</a>
      <a className="dropdown-item" href="#">Another action</a>
      <a className="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  

• 如果你用的是Bootstrap 4，data-toggle是正确的，但仍需确保JS依赖已正确引入。

内容的提问来源于stack exchange，提问作者Pulsara Sandeepa