React中使用Bootstrap库时Navbar下拉切换菜单无法正常工作

问题核心原因 #

1. React中元素类名属性需用className而非原生HTML的class，你代码里的class属性无法被React正确识别。
2. Bootstrap下拉菜单依赖Popper.js和Bootstrap的JavaScript支持，未正确引入会导致交互功能失效。

修复步骤 #

1. 替换class为className #

修改导航栏代码，将所有class替换为React支持的className：

<li className="nav-item dropdown">
  <a 
    className="nav-link dropdown-toggle" 
    href="#" 
    id="navbarDropdownMenuLink" 
    data-toggle="dropdown" 
    aria-haspopup="true" 
    aria-expanded="false"
  >
    Reports
  </a>
  <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <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>
</li>

2. 正确引入Bootstrap依赖 #

方式一：使用原生Bootstrap

• 安装依赖包：

npm install bootstrap @popperjs/core

• 在src/index.js中导入CSS和JS：

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

方式二：使用React-Bootstrap（推荐，更适配React）

React-Bootstrap是Bootstrap的React封装组件，可避免原生JS与React的DOM操作冲突：

• 安装依赖包：

npm install react-bootstrap bootstrap

• 导入NavDropdown组件替代原生代码：

import { NavDropdown } from 'react-bootstrap';

// 在导航栏中使用该组件
<NavDropdown title="Reports" id="navbarDropdownMenuLink">
  <NavDropdown.Item href="#">Action</NavDropdown.Item>
  <NavDropdown.Item href="#">Another action</NavDropdown.Item>
  <NavDropdown.Item href="#">Something else here</NavDropdown.Item>
</NavDropdown>

• 同时在src/index.js中导入Bootstrap基础样式：

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

内容的提问来源于stack exchange，提问作者yvr.satinder