Bootstrap 5.1与React集成时dropdown下拉菜单无法触发问题求助

核心原因 #

你使用的是Bootstrap 5.x版本，该版本对所有自定义数据属性增加了bs命名空间，你当前代码里写的data-toggle是Bootstrap 4的旧属性，无法触发Bootstrap 5的下拉交互逻辑。

修复步骤 #

• 第一步：修改ExpenseFilter组件中下拉按钮的属性，将data-toggle="dropdown"替换为data-bs-toggle="dropdown"即可，修改后的按钮代码如下：

<button 
  className="btn btn-secondary dropdown-toggle" 
  type="button" 
  id="dropdownMenuButton" 
  data-bs-toggle="dropdown" 
  aria-haspopup="true" 
  aria-expanded="false"
>
  select year
</button>

• （可选优化）如果你后续要大量使用Bootstrap组件，更推荐使用适配React的react-bootstrap库，无需手动管理数据属性和依赖引入，用法更符合React组件化逻辑：
  1. 执行npm install react-bootstrap安装依赖
  2. 直接使用封装好的Dropdown组件，避免原生属性不兼容问题

验证效果 #

修改完成后重启项目，点击下拉按钮即可正常展开选项列表，控制台无报错。

内容的提问来源于stack exchange，提问作者Amit Gupta