React中使用useState实现MegaMenu的菜单切换异常问题求助

你遇到的核心问题是用了单个布尔状态mainMenu来控制所有子菜单的显示/隐藏，所以不管点击哪个<li>，所有子元素都会跟着切换类名。咱们调整一下状态设计，就能让每个菜单项独立控制自己的子菜单：

方案1：用状态存储当前激活的菜单标识（推荐） #

把原来的布尔状态改成存储当前激活的菜单ID、索引或者唯一标识，精准控制单个子菜单：

步骤1：修改状态初始化 #

// 初始状态设为null，表示没有激活的菜单
const [activeMenu, setActiveMenu] = useState(null);

步骤2：修改点击事件处理函数 #

让点击函数接收当前菜单的标识，判断是否是当前激活的菜单，来切换状态：

const handleMainMenu = (menuId) => {
  // 如果点击的是当前激活的菜单，就关闭；否则切换到这个菜单
  setActiveMenu(prev => prev === menuId ? null : menuId);
};

步骤3：绑定事件并判断类名 #

如果菜单是循环渲染的，给每个<li>传递对应的索引：

{menuItems.map((item, index) => (
  <li 
    key={index} 
    onClick={() => handleMainMenu(index)}
    className="menu-item"
  >
    {item.label}
    {/* 根据当前activeMenu是否等于当前索引来切换类 */}
    <div className={`sub-menu ${activeMenu === index ? "nb-block" : "nb-hidden"}`}>
      {item.subItems}
    </div>
  </li>
))}

如果是固定菜单，也可以手动指定唯一ID：

<li onClick={() => handleMainMenu('menu1')}>
  菜单1
  <div className={`sub-menu ${activeMenu === 'menu1' ? "nb-block" : "nb-hidden"}`}>...</div>
</li>
<li onClick={() => handleMainMenu('menu2')}>
  菜单2
  <div className={`sub-menu ${activeMenu === 'menu2' ? "nb-block" : "nb-hidden"}`}>...</div>
</li>

方案2：给每个菜单项单独维护状态（适合少量固定菜单） #

如果菜单数量少且固定，也可以给每个菜单单独加状态：

const [menu1Active, setMenu1Active] = useState(false);
const [menu2Active, setMenu2Active] = useState(false);

// 每个菜单对应自己的点击函数
const handleMenu1 = () => setMenu1Active(!menu1Active);
const handleMenu2 = () => setMenu2Active(!menu2Active);

然后分别绑定到对应的<li>上，类名判断对应各自状态即可。不过这种方式扩展性差，菜单多了会很冗余，更推荐方案1。

额外优化：点击菜单外区域关闭子菜单 #

如果需要点击页面其他地方关闭打开的子菜单，可以加全局监听：

useEffect(() => {
  const handleClickOutside = (e) => {
    // 假设菜单容器有类名`mega-menu-container`
    if (!e.target.closest('.mega-menu-container')) {
      setActiveMenu(null);
    }
  };
  document.addEventListener('click', handleClickOutside);
  return () => document.removeEventListener('click', handleClickOutside);
}, []);

这样就能实现点击单个菜单只展开对应子菜单，其他菜单保持关闭的效果啦～

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