原生JS转React汉堡导航报错、导航栏不显示问题排查

1. 初始querySelector报错的根因 #

React基于虚拟DOM渲染，原生querySelector等DOM选择API执行时机如果早于组件挂载，会直接拿到null触发报错；组件重渲染时DOM引用也会失效，因此React中不要直接用原生API操作DOM，通过状态驱动视图更新即可，你当前用useState控制导航开关的思路是正确的。

2. 导航栏不显示的核心问题与修复 #

你当前代码存在3个直接导致导航栏不渲染的问题，按以下步骤修改即可：

• 根容器缺失定位基准：内部.navbar使用了position: absolute绝对定位，会向上查找最近的非static定位祖先元素作为宽高、定位的计算基准，你当前组件根div是默认static定位，会导致导航栏宽高计算为0、定位偏移。
• class拼接逻辑不严谨：模板字符串中直接写${navIsOpen && "nav-open"}，当状态为false时会把字符串"false"作为类名加到元素上，可能引发样式匹配异常。
• 层级设置错误：汉堡按钮z-index仅为1，导航栏未设置z-index，展开时容易被其他元素遮挡，同时按钮可能被导航栏覆盖无法点击。

修复后代码 #

Burger.jsx 组件代码 #

import React, { useState } from "react";
import "../css/Burger.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons';

function Burger() {
  const [navIsOpen, setNavIsOpen] = useState(false);

  const toggleNavHandler = () => {
    setNavIsOpen((prev) => !prev);
  };

  return (
    <div className="burger-container">
      <div
        className={`burger ${navIsOpen ? "burger-open" : ""}`}
        onClick={toggleNavHandler}
      >
        <i><FontAwesomeIcon icon={faArrowRight} /></i>
        <i><FontAwesomeIcon icon={faArrowLeft} /></i>
      </div>

      <nav className={`navbar ${navIsOpen ? "nav-open" : ""}`}>
        <ul className="nav-links">
          <li className={`nav-link ${navIsOpen ? "nav-link-open" : ""}`}>
            <a href="#">Home</a>
          </li>
          <li className={`nav-link ${navIsOpen ? "nav-link-open" : ""}`}>
            <a href="#">Blog</a>
          </li>
          <li className={`nav-link ${navIsOpen ? "nav-link-open" : ""}`}>
            <a href="#">Gallery</a>
          </li>
          <li className={`nav-link ${navIsOpen ? "nav-link-open" : ""}`}>
            <a href="#">About</a>
          </li>
          <li className={`nav-link ${navIsOpen ? "nav-link-open" : ""}`}>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

export default Burger;

Burger.css 补充/修改样式 #

在原有CSS基础上新增/替换以下样式：

/* 新增根容器样式，作为内部绝对定位元素的基准 */
.burger-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* 修改.navbar样式，添加z-index */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #23f0ff;
  clip-path: circle(0px at 0 0px);
  transition: 0.5s ease all;
  z-index: 0;
}

/* 修改.burger样式，提高z-index保证可点击 */
.burger {
  position: absolute;
  top: 25px;
  right: 25px;
  color: #23f0ff;
  cursor: pointer;
  z-index: 10;
  display: flex;
}

额外检查项 #

• 确认FontAwesome依赖安装完整，在项目根目录执行安装命令后重启开发服务：
  npm i @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
• 确认CSS文件引入路径正确，打开浏览器控制台看是否存在CSS文件404报错，根据目录结构调整import "../css/Burger.css"的路径即可。
• 确认上层组件（如App.jsx）已经正确引入并渲染Burger组件。

内容的提问来源于stack exchange，提问作者박세령