React+TypeScript环境下Bootstrap 5.3下拉菜单无法展开问题

我是编程与Web开发新手，尝试在导航栏中添加Bootstrap 5.3下拉菜单，但菜单无法展开。已导入Bootstrap的CSS和bundle文件，也检查过Popper是否安装。

Dropdown组件代码 #

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

export default function Dropdown() {
    return (
            <div className="dropdown">
                <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                </button>
                <ul className="dropdown-menu">
                    <li><a className="dropdown-item" href="#">Action</a></li>
                    <li><a className="dropdown-item" href="#">Another action</a></li>
                    <li><a className="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
    );
}

Navbar组件代码 #

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import './Navbar.css';
import { NavLink } from 'react-router-dom';
import SignUp from './SignUp';
import Login from './Login';
import AuthContext from '../context/AuthProvider';
import { useContext } from 'react';
import DropdownUser from '../pages/DebtPage/DropdownUser';

export default function Navbar() {
    const {auth} = useContext(AuthContext)

    return (
            <nav className="navbar navbar-expand-lg">
                <div className="container-fluid justify-content-center">
                    <a className="navbar-brand" href="#">OweSmart</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="navbar-nav collapse navbar-collapse" id="navbarNavAltMarkup">
                        <NavLink to="/#" style={{ textDecoration: "none" }} className="nav-link">
                            <li className="nav-item">
                                Home
                            </li>
                        </NavLink>
                        <NavLink to="/ContactPage" style={{ textDecoration: "none" }} className="nav-link">
                            <li className="nav-item">
                                Contacts
                            </li>
                        </NavLink>
                        <NavLink to="/DebtPage" style={{ textDecoration: "none" }} className="nav-link">
                            <li className="nav-item">
                                Debts
                            </li>
                        </NavLink>
                    </div>
                    <DropdownUser></DropdownUser>
                    {auth.id ? (
                        <div className='username'>
                        {auth.username}
                    </div>
                    ) : (
                        <div>
                        <Login></Login>
                    </div>
                    )
                    }
                    <div className='btn-nav'>
                        <SignUp
                            signupText="Sign Up"
                            customeButtonClass="btn-signup-navbar"
                        ></SignUp>
                    </div>
                </div>
            </nav>
    )
}

已尝试的解决方法 #

我试过检查Popper安装情况、手动设置EventListener，还试过给按钮和ul元素添加ID，但都无效，修改后的代码如下：

<div className="dropdown">
            <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="collapse" aria-expanded="false" id="thing1" data-bs-target="thing2">
                Dropdown button
            </button>
            <ul className="dropdown-menu" id="thing2" aria-labelledby="thing1">
                <li><a className="dropdown-item" href="#">Action</a></li>
                <li><a className="dropdown-item" href="#">Another action</a></li>
                <li><a className="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>

问题排查与解决方案 #

1. 移除重复的Bootstrap JS导入 #

你的Dropdown和Navbar组件都导入了bootstrap.bundle.min.js，重复加载会破坏Bootstrap的初始化逻辑。只在项目入口文件（比如index.js/App.js）中导入一次，所有组件内不要再重复导入。

2. 修正下拉菜单的属性错误 #

你修改后的代码把data-bs-toggle="dropdown"改成了collapse，这是错误的——collapse用于折叠面板，下拉菜单必须用dropdown作为data-bs-toggle的值；同时data-bs-target需要加#前缀（比如#thing2）才能正确定位目标元素。

修正后的Dropdown代码：

<div className="dropdown">
  <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="thing1">
    Dropdown button
  </button>
  <ul className="dropdown-menu" id="thing2" aria-labelledby="thing1">
    <li><a className="dropdown-item" href="#">Action</a></li>
    <li><a className="dropdown-item" href="#">Another action</a></li>
    <li><a className="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

3. 手动初始化下拉菜单（React专属） #

如果上述修改后仍无效，可能是React的DOM更新机制导致Bootstrap无法自动初始化组件。可以在组件挂载时手动初始化：

import { useEffect, useRef } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function Dropdown() {
  const dropdownRef = useRef(null);

  useEffect(() => {
    const dropdown = new window.bootstrap.Dropdown(dropdownRef.current);
    return () => dropdown.dispose();
  }, []);

  return (
    <div className="dropdown" ref={dropdownRef}>
      <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul className="dropdown-menu">
        <li><a className="dropdown-item" href="#">Action</a></li>
        <li><a className="dropdown-item" href="#">Another action</a></li>
        <li><a className="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  );
}

4. 检查Navbar布局上下文 #

确保<DropdownUser>放在navbar容器内的正确位置，避免被其他元素的overflow属性遮挡，Bootstrap下拉菜单需要父元素提供正确的定位上下文。

内容的提问来源于stack exchange，提问作者Tim Lodes