Vite React中使用useRef实现移动端导航栏失效问题排查

问题概述 #

在Vite React项目中尝试用useRef钩子实现移动端响应式导航栏，通过切换nav标签的responsive_nav类控制显示/隐藏，使用react-icons的FaTimes和FaBars按钮触发切换，但功能失效，同时不确定媒体查询的单位是否需要调整。

代码问题分析 #

1. CSS选择器错误 #

原CSS中nav .responsive_nav是后代选择器，而responsive_nav是直接加在nav元素上的类，应该使用元素.class的选择器：nav.responsive_nav，否则样式不会生效。

2. JSX结构不完整 #

代码中<ul>标签未闭合，会导致React渲染报错，直接影响功能正常运行。

3. 导航栏样式冲突 #

桌面端nav设置了固定height: 1.1rem，移动端改为height: 100vh，但桌面端的高度限制会导致导航内容被截断，需要调整为最小高度。

4. 按钮显示逻辑问题 #

两个切换按钮始终存在，未根据导航栏状态切换显示，导致交互混乱。

修复后的完整代码 #

JSX组件 #

import React, { useRef } from "react";
import "../styles/styles.css";
import { Link } from "react-router-dom";
import { FaBars, FaTimes } from "react-icons/fa";

function NavBar() {
  const navRef = useRef();

  const showNavBar = () => {
    navRef.current.classList.toggle("responsive_nav");
  };

  return (
    <>
      <nav ref={navRef}>
        <div className="itemL">
          <Link to="#">mjshubham21</Link>
        </div>
        <div className="itemR">
          <ul>
            <li>
              <Link to="#">Home</Link>
            </li>
          </ul> {/* 修复未闭合的ul标签 */}
        </div>
      </nav>
      <button className="nav-btn nav-close-btn" onClick={showNavBar}>
        <FaTimes />
      </button>
      <button className="nav-btn" onClick={showNavBar}>
        <FaBars />
      </button>
    </>
  );
}

export default NavBar;

CSS样式 #

/* 桌面端导航基础样式 */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0.8rem;
  min-height: 4rem; /* 替换固定height，避免内容截断 */
  z-index: 200;
}

.nav-btn {
  padding: 0.5rem;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  position: absolute;
  top: 2rem;
  right: 2rem;
  visibility: hidden;
  opacity: 0;
  font-size: 1.5rem;
  transition: visibility 0.25s, opacity 0.25s;
}

/* 移动端媒体查询 */
@media (max-width: 450px) {
  .nav-btn {
    visibility: visible;
    opacity: 1;
  }
  /* 导航展开时隐藏汉堡按钮 */
  nav.responsive_nav .nav-btn:not(.nav-close-btn) {
    visibility: hidden;
    opacity: 0;
  }
  nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transition: transform 0.25s ease;
    transform: translateY(-100vh);
    background-color: #fff; /* 添加背景色，避免内容穿透 */
  }
  /* 修正选择器，匹配nav元素上的responsive_nav类 */
  nav.responsive_nav {
    transform: translateY(0);
  }

  .nav-close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
  }

  nav a {
    font-size: 2rem;
  }
}

媒体查询单位说明 #

max-width: 450px是完全可行的。如果希望适配不同字体大小的设备，可以改用相对单位：

• 以16px为基准，450px ≈ 28.125em，可写成max-width: 28.125em
• 相对单位（em/rem）会根据用户的字体设置自动调整，适配性更强；px单位在固定断点场景下也完全可用，根据项目需求选择即可。

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