React响应式导航栏问题：移动端关闭后桌面端不显示，如何强制显示？

直接调整导航栏<ul>的className逻辑，让桌面端（md断点及以上）始终强制显示导航，移动端根据isOpen状态控制显示/隐藏：

const [isOpen, setIsOpen] = useState(false);

<FiMenu className="md:hidden" onClick={() => setIsOpen(!isOpen)} />
<ul
  className={`text-2xl gap-10 text-center ${isOpen ? "block" : "hidden"} md:flex`}
>
  {/* 导航项内容 */}
</ul>

逻辑说明： #

• 基础类text-2xl gap-10 text-center为通用样式，所有屏幕尺寸生效
• ${isOpen ? "block" : "hidden"}：仅在**移动端（md断点以下）**控制导航的显示/隐藏，打开汉堡菜单时显示，关闭时隐藏
• md:flex：在**桌面端（md断点及以上）**强制使用flex布局，该响应式类优先级会覆盖前面的hidden，因此无论isOpen状态如何，桌面端都能正常显示导航

可选体验优化 #

如果希望屏幕从桌面尺寸切回移动端时，菜单自动恢复关闭状态，可以监听窗口resize事件重置isOpen：

useEffect(() => {
  const handleResize = () => {
    if (window.innerWidth >= 768) { // 对应Tailwind默认的md断点宽度
      setIsOpen(false);
    }
  };

  window.addEventListener('resize', handleResize);
  // 初始化时检查一次当前屏幕尺寸
  handleResize();

  return () => window.removeEventListener('resize', handleResize);
}, []);

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