React小屏幕导航onClick触发菜单显隐失效问题排查修复

• 原生DOM获取时机错误：组件外部的document.getElementById('navLinks')在JS模块加载时就执行，此时React还未完成组件渲染，90%以上概率拿到null。之前偶尔生效纯粹是模块加载延迟、热更新时序问题撞上了DOM已渲染的场景，完全不可控。
• React语法错误：所有HTML标签上的class属性必须写成className，你写的class="header"、class="fa"等属性React不会解析，导致CSS规则完全匹配不到元素，小屏幕下汉堡/关闭图标根本显示不出来，自然无法触发点击。
• 点击逻辑写反：关闭图标FaTimes绑定了打开菜单的函数，汉堡图标FaBars绑定了关闭菜单的函数，就算DOM能拿到，操作逻辑也是反的。
• 违反React开发逻辑：手动修改DOM样式的写法，会在组件重渲染时被React直接覆盖，没有任何稳定性。
• CSS缺失必要规则：你只写了.fa默认隐藏，没有加小屏幕媒体查询显示图标，也没给.nav-links加定位属性，right样式修改本身就不会生效。

1. 重写组件逻辑，用React状态控制菜单显隐 #

删掉组件外所有原生DOM操作、手动写的showMenu/hideMenu函数，改用useState管理菜单状态，所有标签的class替换为className：

import React, { useState } from 'react';
import assets from './assets';
import { FaBars, FaFacebook, FaRegHeart, FaInstagram, FaLinkedin, FaStar, FaStarHalf, FaTimes, FaTwitter } from 'react-icons/fa';

export const Home = () => {
  // 菜单状态：false为关闭，true为打开
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <>
      <section className="header">
        <nav>
          <a href="/"><img src={assets.logo} alt='Logo' width='100%' /></a>
          <div 
            id='navLinks' 
            className='nav-links'
            style={{ right: isMenuOpen ? '0' : '-200px' }}
          >
            {/* 关闭按钮点击后设置菜单为关闭状态 */}
            <FaTimes className='fa' onClick={() => setIsMenuOpen(false)} />
            <ul>
              <li><a href="/">HOME</a></li>
              <li><a href="/About">ABOUT</a></li>
              <li><a href="/Course">COURSE</a></li>
              <li><a href="/Blog">BLOG</a></li>
              <li><a href="/Contact">CONTACT</a></li>
            </ul>
          </div>
          {/* 汉堡按钮点击后设置菜单为打开状态 */}
          <FaBars className='fa' onClick={() => setIsMenuOpen(true)} />
        </nav>

        <div className="text-box">
          <h1>World's Biggest University</h1>
          <p>Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS,<br />Javascript and you are good to go.</p>
          <a href="/Contact" className="hero-btn">Visit Us to Know More</a>
        </div>
      </section>
    </>
  )
}

2. 补全响应式CSS #

你之前的CSS只写了图标默认隐藏，缺小屏幕适配、侧边栏定位基础样式，补全如下：

/* 大屏状态下默认隐藏汉堡、关闭图标 */
nav .fa{
  display: none;
}

/* 小屏幕断点，可根据需求调整宽度阈值 */
@media(max-width: 700px){
  /* 小屏幕下显示操作图标 */
  nav .fa{
    display: block;
    color: #fff;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
  /* 侧边栏基础定位样式，没有position的话right属性不生效 */
  .nav-links{
    position: fixed;
    background: #f44336;
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    z-index: 99;
    transition: right 0.3s ease;
    padding-top: 50px;
  }
  .nav-links ul{
    padding: 0 30px;
  }
  .nav-links ul li{
    display: block;
    margin: 20px 0;
  }
}

模块加载和React渲染是两个独立的时序流程：如果遇到开发环境热更新、网络延迟导致JS模块执行慢于React渲染，组件外的getElementById就能拿到已经挂载的DOM节点，点击事件就会正常触发；绝大多数场景下模块加载速度更快，执行DOM查询时节点还没挂载，拿到的是null，点击就会报错。这种写法完全依赖时序巧合，生产环境绝对不能用。

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