页面重载时汉堡菜单始终显示的问题排查与修复方案

核心问题定位 #

你代码里的逻辑搞反了：toggleMenu默认是false，而你给菜单容器加的类是${toggleMenu && "hidden"}——这意味着只有当toggleMenu为true时，菜单才会被隐藏。初始状态toggleMenu是false，自然不会添加hidden类，所以页面重载时菜单直接显示出来了。

修复方案 #

直接调整className的判断逻辑，改成当toggleMenu为false时添加hidden类，代码如下：

export default function NavBar() {
    const [toggleMenu, setToggleMenu] = useState(false);
    const viewMenu = () => {
        setToggleMenu(!toggleMenu)
    }

  return (
    <>
        <div className="flex justify-around w-[90%] my-3 mx-auto rounded-md navbar bg-base-200">
            <div>
                <button onClick={viewMenu} className="text-xl btn">
                    <BiMenuAltLeft />
                </button>
            </div>
            <div>
                <button className="text-2xl btn btn-ghost">MEDFITS</button>
            </div>
            <div>
                <button className="p-2 text-xl btn"><VscAccount /></button>
                <button className="p-2 text-xl btn"><BiSearchAlt /></button>
            </div>
        </div>
        {/* 修改这里的条件判断：!toggleMenu 时添加 hidden */}
        <div className={`w-fit bg-base-200 mx-10 rounded-md ${!toggleMenu && "hidden" }`}>
            <ul className="p-4 text-center">
                <li><a className="btn btn-wide" href="/">HOME</a></li>
                <li><a className="btn btn-wide" href="/about">ABOUT</a></li>
                <li><a className="btn btn-wide" href="/shop">SHOP</a></li>
                <li><a className="btn btn-wide" href="/contact">CONTACT</a></li>
            </ul>
        </div>
    </>
  )
}

优化思路 #

1. 优化事件处理函数：用useCallback包裹viewMenu，同时改用函数式更新状态，避免闭包导致的状态更新问题，提升组件性能：

import { useState, useCallback } from 'react';

// ...
const viewMenu = useCallback(() => {
    setToggleMenu(prev => !prev);
}, []);

2. 点击外部关闭菜单：监听全局点击事件，点击菜单和汉堡按钮之外的区域时自动关闭菜单，提升用户体验：

import { useState, useCallback, useEffect, useRef } from 'react';

// ...
const menuRef = useRef(null);
const buttonRef = useRef(null);

useEffect(() => {
    const handleClickOutside = (e) => {
        if (menuRef.current && !menuRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) {
            setToggleMenu(false);
        }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);

// 给按钮和菜单容器绑定ref
<button ref={buttonRef} onClick={viewMenu} className="text-xl btn">
    <BiMenuAltLeft />
</button>

<div ref={menuRef} className={`w-fit bg-base-200 mx-10 rounded-md ${!toggleMenu && "hidden" }`}>
    {/* 菜单内容 */}
</div>

3. 添加键盘快捷键：支持按ESC键关闭菜单，提升无障碍访问体验：

useEffect(() => {
    const handleKeyDown = (e) => {
        if (e.key === 'Escape') {
            setToggleMenu(false);
        }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
}, []);

4. 响应式适配大屏：在大屏幕下直接显示菜单、隐藏汉堡按钮，避免小屏幕逻辑干扰大屏布局（用Tailwind响应式类实现）：

// 汉堡按钮仅在小屏幕显示
<button ref={buttonRef} onClick={viewMenu} className="text-xl btn md:hidden">
    <BiMenuAltLeft />
</button>

// 菜单容器在大屏下默认显示，小屏幕才受toggle控制
<div className={`w-fit bg-base-200 mx-10 rounded-md md:block ${!toggleMenu && "hidden md:hidden" }`}>
    {/* 菜单内容 */}
</div>

5. 添加过渡动画：用Tailwind的过渡类让菜单显示/隐藏更流畅：

<div className={`w-fit bg-base-200 mx-10 rounded-md transition-all duration-300 ease-in-out ${!toggleMenu ? "hidden opacity-0 h-0" : "opacity-100 h-auto"}`}>
    {/* 菜单内容 */}
</div>

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