React响应式汉堡菜单移动端点击无反应 报classList空指针错误如何解决

问题原因 #

1. DOM查询时机错误：你把document.querySelector逻辑直接写在组件函数的顶层，组件首次执行渲染函数的时候，对应的DOM元素（尤其是不在当前Hamburger组件内的.header、.overlay、.has-fade元素）可能还没挂载到页面上，查询结果就是null，调用null.classList自然会抛出类型错误。桌面端运行正常大概率是刚好渲染时机碰对了，移动端渲染逻辑/速度有差异就触发了问题。
2. 不符合React开发范式：直接操作原生DOM会脱离React的状态管控，很容易出现状态和UI不一致、元素找不到的问题，React本身有更安全的状态驱动UI的实现方式。

修复方案1：快速兼容（无需大改现有逻辑） #

把所有DOM查询逻辑移到hamClick函数内部，每次触发点击时再查询DOM元素，同时增加非空判断避免极端情况报错：

import React from 'react';

import "./scss/animations.scss";
import './scss/header.scss';
import './scss/mixins.scss';

const Hamburger = () => {
    const hamClick = (e) => {
        e.preventDefault();
        // 点击时再查询DOM，保证元素已经挂载
        const body = document.querySelector('body');
        const header = document.querySelector('.header');
        const fadeElems = document.querySelectorAll('.has-fade');

        // 非空校验，避免极端情况报错
        if(!header || !body) return;

        if(header.classList.contains('open')){//close hamburger
            body.classList.remove('noscroll');
            header.classList.remove('open');
            fadeElems.forEach(function(element){
                element.classList.remove('fade-in');
                element.classList.add('fade-out');
            });    
        }
        else{//open hamburger
            body.classList.add('noscroll');
            header.classList.add('open');
            fadeElems.forEach(function(element){
                element.classList.add('fade-in');
                element.classList.remove('fade-out');
            });   
        }
    }

    return(
        <a id="btnnHamburger" className="header__toggle hide-for-desktop" href="#" onClick={hamClick}>
            <span></span>
            <span></span>
            <span></span>
        </a>
    )
}

export default Hamburger;

修复方案2：React状态驱动实现（推荐） #

用React的useState管理菜单展开状态，避免直接操作DOM，更加稳定可维护：

1. 将菜单的展开状态提升到父组件（也就是包含.header元素的组件），通过props传递给Hamburger组件和需要切换类名的元素
2. 状态变化时自动更新对应的类名，不需要手动查询DOM操作classList

父组件示例逻辑：

import { useState } from 'react';
import Hamburger from './Hamburger';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
    // 控制body的滚动
    document.body.classList.toggle('noscroll', !isMenuOpen);
  }

  return (
    <div className={`header ${isMenuOpen ? 'open' : ''}`}>
      <Hamburger toggleMenu={toggleMenu} />
      {/* 其他头部元素，需要动画的对应绑定类名即可 */}
      <div className={`overlay has-fade ${isMenuOpen ? 'fade-in' : 'fade-out'}`}></div>
      <nav className={`header__nav has-fade ${isMenuOpen ? 'fade-in' : 'fade-out'}`}>
        {/* 导航项内容 */}
      </nav>
    </div>
  )
}

简化后的Hamburger组件代码：

import React from 'react';
import "./scss/animations.scss";
import './scss/header.scss';
import './scss/mixins.scss';

const Hamburger = ({ toggleMenu }) => {
    const hamClick = (e) => {
        e.preventDefault();
        toggleMenu();
    }

    return(
        <a className="header__toggle hide-for-desktop" href="#" onClick={hamClick}>
            <span></span>
            <span></span>
            <span></span>
        </a>
    )
}

export default Hamburger;

这种写法完全脱离了原生DOM查询，所有类名切换由React状态驱动，不会再出现元素找不到的报错，也更符合React的开发规范。

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