Bootstrap v4.1.3移动端Navbar汉堡按钮失效，迁移React遇报错

一、移动端导航栏汉堡按钮/下拉菜单失效修复 #

• 正确引入Bootstrap依赖：React项目中使用Bootstrap，需确保引入顺序正确：先引入popper.js，再引入bootstrap.js。如果用npm安装，在src/index.js中添加：

  import 'bootstrap/dist/css/bootstrap.min.css';
  import '@popperjs/core';
  import 'bootstrap/dist/js/bootstrap.min.js';
  

  若用CDN，直接在public/index.html的<head>或<body>末尾添加对应脚本。
• 放弃jQuery直接操作DOM：原HTML中的jQuery绑定（比如$('.navbar-toggler').click(...)）会和React虚拟DOM冲突，改用React状态控制或react-bootstrap封装组件（推荐）。
• 检查Bootstrap结构合规性：确保导航栏结构符合官方规范：
  • .navbar-toggler需带data-bs-toggle="collapse"和data-bs-target="#对应折叠容器ID"属性
  • 折叠容器需设置id="对应ID"并添加collapse navbar-collapse类

二、报错逐一修复 #

1. functions.js:52:6 Uncaught TypeError: Cannot read properties of undefined (reading 'bind') #

• 问题根源：调用bind的对象未定义，大概率是DOM元素未渲染就执行了操作，或函数上下文丢失。
• 修复方案：
  • 将DOM相关操作移至React的useEffect钩子中，确保组件挂载后执行：

    useEffect(() => {
      // 原functions.js中第52行附近的代码
    }, []);
    

  • 若为组件内函数的上下文问题，改用箭头函数定义，或在组件初始化时绑定上下文：

    constructor(props) {
      super(props);
      this.yourFunction = this.yourFunction.bind(this);
    }
    

2. animated_canvas_min.js:4 Uncaught TypeError: Cannot read properties of null (reading 'getContext') #

• 问题根源：代码尝试获取canvas元素的getContext时，元素尚未渲染或ID拼写错误导致获取到null。
• 修复方案：
  • 用useEffect延迟执行canvas相关代码，确保元素已存在：

    useEffect(() => {
      const canvas = document.getElementById('你的canvas元素ID');
      if (canvas) {
        const ctx = canvas.getContext('2d');
        // 原animated_canvas_min.js中的逻辑代码
      }
    }, []);
    

  • 检查canvas元素的ID与代码中调用的ID是否完全一致，避免拼写错误。

推荐：用react-bootstrap重构Header组件 #

直接使用官方封装的React组件，避免DOM操作冲突：

import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function Header() {
  return (
    <Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand href="#home">站点名称</Navbar.Brand>
        <Navbar.Toggle aria-controls="main-nav-collapse" />
        <Navbar.Collapse id="main-nav-collapse">
          <Nav className="me-auto">
            <Nav.Link href="#home">首页</Nav.Link>
            <Nav.Link href="#about">关于我们</Nav.Link>
            <NavDropdown title="更多" id="main-nav-dropdown">
              <NavDropdown.Item href="#service">服务</NavDropdown.Item>
              <NavDropdown.Item href="#contact">联系我们</NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Header;

内容的提问来源于stack exchange，提问作者Mohammed Arham Khan