React中Bootstrap响应式Navbar折叠Toggle按钮失效求助

我看了你的代码，问题其实有两个关键点，咱们一步步来解决：

1. 最直接的错误：data-target属性格式错误 #

你的toggle按钮里的data-target="/navbarSupportedContent"写错了！Bootstrap的data-target需要通过ID选择器来关联折叠容器，正确的写法应该是data-target="#navbarSupportedContent"（用#开头，而不是/）。

把按钮代码改成这样：

<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span className="navbar-toggler-icon"></span>
</button>

2. React环境下的Bootstrap JS冲突问题 #

你在组件里同时导入了本地的jQuery和Bootstrap JS，又在index.html里引入了CDN版本，这很容易导致重复加载和冲突。而且Bootstrap的原生JS依赖jQuery直接操作DOM，和React的虚拟DOM机制不太兼容，可能会出现事件绑定失效的情况。

临时修复（保留原生Bootstrap） #

先移除组件内的这两行导入：

import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap";

只保留index.html里的CDN链接，避免重复加载。如果还是不行，可以在组件的componentDidMount生命周期里手动初始化折叠组件：

componentDidMount() {
  // 确保DOM渲染完成后初始化Bootstrap折叠功能
  $('[data-toggle="collapse"]').bootstrapCollapse();
}

推荐方案：使用react-bootstrap（更符合React生态） #

原生Bootstrap和React配合总会有各种小问题，更稳妥的方式是用官方维护的react-bootstrap库，它把Bootstrap组件封装成了React组件，完全不需要依赖jQuery。

步骤如下：

1. 安装依赖：

npm install react-bootstrap bootstrap

2. 在你的项目入口文件（比如index.js）导入Bootstrap CSS：

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

3. 重写你的Navbar组件：

import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

class MyNavbar extends Component {
  render() {
    return (
      <Navbar expand="lg" bg="light" variant="light">
        <Navbar.Brand href="/">Aditya Chopra</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <NavItem>
              <Nav.Link href="/About">About</Nav.Link>
            </NavItem>
            <NavItem>
              <Nav.Link href="/Contact">Contact</Nav.Link>
            </NavItem>
            <NavItem>
              <Nav.Link href="/Projects" active>Projects</Nav.Link>
            </NavItem>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default MyNavbar;

这种方式完全遵循React的组件化思想，不会有DOM操作冲突的问题，toggle按钮的功能也能正常工作。

先试试第一个方案修正data-target，应该就能解决当前的问题；如果后续还有其他兼容性问题，再切换到react-bootstrap会更省心。

内容的提问来源于stack exchange，提问作者Aditya Chopra