Bootstrap 5.1 dropdown组件在React项目中点击无法展开问题求助

你当前使用的是Bootstrap 5.x版本，该版本对所有交互组件的data触发属性做了命名空间调整，所有原data-*格式的触发属性都需要改为data-bs-*格式，你代码中使用的还是Bootstrap 4版本的data-toggle属性，因此无法触发下拉交互。

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

import React from "react";

function ExpenseFilter() {
    return (
        <div className="d-flex justify-content-around">
            <div className="text-light">
                <h4>filter expenses by year</h4>
            </div>
            <div className="dropdown">
                <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    select year
                </button>
                <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a className="dropdown-item" href="/#">2019</a>
                    <a className="dropdown-item" href="/#">2020</a>
                    <a className="dropdown-item" href="/#">2021</a>
                </div>
            </div>
        </div>
    );
}

export default ExpenseFilter;

另外你当前index.js中重复引入了两次Bootstrap样式文件，可以删除其中任意一行样式引入，避免冗余：

// 删去其中一行即可
import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap/dist/css/bootstrap.min.css"; 

原生Bootstrap的交互逻辑是基于原生DOM操作的，在React项目中更推荐使用适配React的react-bootstrap组件库，无需手动处理data属性，避免类似属性不匹配问题：

1. 安装依赖：
   npm install react-bootstrap
2. 修改ExpenseFilter组件代码如下：

import React from "react";
import Dropdown from 'react-bootstrap/Dropdown';

function ExpenseFilter() {
    return (
        <div className="d-flex justify-content-around">
            <div className="text-light">
                <h4>filter expenses by year</h4>
            </div>
            <Dropdown>
                <Dropdown.Toggle variant="secondary" id="dropdownMenuButton">
                    select year
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item href="/#">2019</Dropdown.Item>
                    <Dropdown.Item href="/#">2020</Dropdown.Item>
                    <Dropdown.Item href="/#">2021</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
        </div>
    );
}

export default ExpenseFilter;

以上两种方案任选其一即可解决下拉框无法展开的问题。

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