Bootstrap-5.1 下拉菜单不适用于 React

Question

我正在学习反应，并且对于样式我正在尝试使用引导程序。

我坚持使用下拉菜单。我探索了几乎所有的 stackoverflow 帖子，但无法解决。如果有人知道正确的解决方案，请帮助我。

我的组件类：

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-toggle="dropdown" aria-haspopup="true" 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 类：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap/dist/css/bootstrap.min.css"; 
import "@popperjs/core"; 
import "bootstrap";



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

包.json：

"dependencies": {
    "@popperjs/core": "^2.9.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.0",
    "npm": "^7.21.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-popper": "^2.2.5",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }

• 控制台上没有错误。下拉按钮正确呈现，但单击它时不显示下拉选项
• npm 启动期间也没有错误/警告

Answer 1

Bootstrap 4 中使用的属性data-*已替换为data-bs-*Bootstrap 5 中的属性，因此您可以使用...

data-bs-toggle="dropdown"