React中导航栏汉堡图标的addEventListener为何为null？

核心问题 #

你当前用原生DOM API直接操作元素的方式，在React生态里会触发几个关键问题：

1. DOM查询时机不对：如果这段代码直接写在组件函数顶部，组件还没完成DOM渲染时，toggleNav或navLink就会是null，调用addEventListener自然报错。
2. 重复绑定+内存泄漏：组件每次重新渲染，这段代码都会重复执行，事件监听会叠加绑定，旧的监听不会自动清理，积累多了就会引发内存泄漏甚至应用崩溃。
3. 破坏React状态同步：React靠虚拟DOM管理DOM变化，手动修改原生DOM会打乱React的状态逻辑，导致不可预测的bug。

推荐的React原生写法 #

用React的状态管理和内置事件绑定来实现，完全不需要原生DOM操作，更符合React的设计逻辑：

import { useState } from 'react';
// 如果用React Router跳转页面，导入Link组件
// import { Link } from 'react-router-dom';

function Navbar() {
  // 用状态控制菜单展开/收起
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // 切换菜单状态
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  // 点击链接时关闭菜单
  const closeMenuOnLinkClick = () => {
    setIsMenuOpen(false);
  };

  return (
    <nav className="navbar">
      {/* 汉堡按钮直接绑定点击事件 */}
      <button className="hamburger" onClick={toggleMenu}>
        ☰
      </button>

      {/* 下拉菜单根据状态切换类名 */}
      <div className={`nav-dropdown ${isMenuOpen ? 'hamburger-open' : ''}`}>
        {/* React Router Link版本 */}
        {/* <Link to="/home" onClick={closeMenuOnLinkClick} id="navLink">首页</Link>
        <Link to="/about" onClick={closeMenuOnLinkClick} id="navLink">关于我们</Link> */}
        
        {/* 普通a标签版本 */}
        <a href="/home" onClick={closeMenuOnLinkClick} id="navLink">首页</a>
        <a href="/about" onClick={closeMenuOnLinkClick} id="navLink">关于我们</a>
      </div>
    </nav>
  );
}

export default Navbar;

关键改进点 #

• 状态驱动UI：用useState的isMenuOpen控制菜单显示，React自动同步DOM变化，不用手动操作classList。
• 内置事件绑定：直接在React元素上绑定onClick，React会自动处理事件的绑定与解绑，避免重复绑定和内存泄漏。
• 无需DOM查询：所有交互逻辑都通过React组件状态实现，绕开原生DOM操作的坑。

如果一定要保留原生DOM操作（不推荐） #

如果有特殊需求必须用原生DOM，至少把代码放在useEffect钩子中，确保DOM渲染完成后执行，并且清理事件监听：

import { useEffect } from 'react';

function Navbar() {
  useEffect(() => {
    const toggleBtn = document.querySelector(".hamburger");
    const navLinks = document.querySelectorAll("#navLink");

    const handleToggle = () => {
      document.body.classList.toggle('hamburger-open');
    };

    const handleLinkClick = () => {
      document.body.classList.remove('hamburger-open');
    };

    // 绑定事件时用可选链避免null报错
    toggleBtn?.addEventListener('click', handleToggle);
    navLinks.forEach(link => link?.addEventListener('click', handleLinkClick));

    // 组件卸载时清理事件监听，防止内存泄漏
    return () => {
      toggleBtn?.removeEventListener('click', handleToggle);
      navLinks.forEach(link => link?.removeEventListener('click', handleLinkClick));
    };
  }, []); // 空依赖数组，只在组件挂载/卸载时执行一次

  return (
    <nav>
      <button className="hamburger">☰</button>
      <div>
        <a href="/home" id="navLink">首页</a>
        <a href="/about" id="navLink">关于我们</a>
      </div>
    </nav>
  );
}

这个写法能避免大部分崩溃问题，但还是推荐第一种React原生写法，更稳定易维护。

内容的提问来源于stack exchange，提问作者Marko Vuger