React响应式Hamburger Menu点击无响应无法切换图标及展示导航链接

问题原因与修复方案 #

1. 核心逻辑错误修复 #

汉堡菜单点击无响应的根本原因是状态切换逻辑写错了：两个图标的点击事件中都用了setOpen(!true)，!true永远返回固定值false，导致open状态始终停留在初始的false，既没法切换图标也没法弹出导航链接。

将两个点击事件的逻辑修改为切换当前open状态即可，推荐使用函数式更新保证状态取值准确：

import React, {useState} from 'react';
import NavLinks from './NavLinks';
import  './nav.css';
import {BiMenuAltRight} from 'react-icons/bi';
import {IoMdClose} from 'react-icons/io';

function MobileNavigation() {
    const [open, setOpen] = useState(false);
    // 点击事件逻辑改为取当前状态的相反值
    const hamburgerIcon = <BiMenuAltRight className="Hamburger" size='50px' color="white" onClick={() => setOpen(prev => !prev)}/>;
    const closeIcon = <IoMdClose className="Hamburger" size='50px' color="white" onClick={() => setOpen(prev => !prev)}/>

    return (
        <nav className="MobileNavigation">
            {open ? closeIcon : hamburgerIcon}
            {open && <NavLinks />}
        </nav>
    );
}

export default MobileNavigation;

2. CSS布局问题修复 #

当前移动端.MobileNavigation的样式存在属性冲突：同时设置了display: grid和flex-direction: column，flex-direction仅在display: flex时生效，会导致导航链接弹出后布局异常，修改媒体查询内的对应样式即可：

@media only screen and (max-width: 768px) {
  .Navigation {
    display: none;
  }
  .MobileNavigation {
    /* 把grid改成flex，匹配后面的flex相关属性 */
    display: flex;
    flex-direction: column;
    background: rgb(0, 30, 60);
    align-items: center;
    min-height: 60px;
  }
  .Hamburger {
    position: absolute;
    right: 5%;
    top: 5px;
    cursor: pointer;
  }
  /* 补充导航链接的样式，避免和汉堡菜单重叠 */
  .MobileNavigation .nav-items {
    flex-direction: column;
    width: 100%;
    padding: 60px 0 20px 0;
    margin: 0;
    gap: 20px;
    text-align: center;
  }
}

做完以上两处修改后，汉堡菜单的点击切换、导航弹出功能就能正常运行。

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