React环境下实现AppBar内不同菜单切换功能的方法咨询

核心实现逻辑是用单一状态统一管控所有菜单的展开状态，避免给每个菜单单独声明独立的开关状态，天然实现菜单之间的互斥切换效果。

实现步骤 #

• 第一步：给每个图标对应的菜单分配唯一标识（可以是字符串、数字类型），声明状态存储当前处于展开状态的菜单标识

import { useState } from 'react';
// 假设四个菜单分别对应：主菜单、通知、用户中心、设置
const MENU_IDS = {
  MAIN: 'main',
  NOTIFICATION: 'notification',
  USER: 'user',
  SETTING: 'setting'
}

function App() {
  // 初始值为null表示所有菜单都关闭
  const [activeMenuId, setActiveMenuId] = useState(null);

• 第二步：封装统一的菜单切换处理函数

const toggleMenu = (targetMenuId) => {
    // 如果点击的是当前已经展开的菜单，就关闭菜单；否则切换为点击的菜单
    setActiveMenuId(prevId => prevId === targetMenuId ? null : targetMenuId);
  }

  // 点击菜单外部/点击菜单项后关闭所有菜单的公共方法
  const closeAllMenu = () => {
    setActiveMenuId(null);
  }

• 第三步：给图标按钮和菜单组件绑定对应属性

return (
    <AppBar position="static">
      <Toolbar>
        {/* 第一个图标按钮 */}
        <IconButton onClick={() => toggleMenu(MENU_IDS.MAIN)}>
          <MenuIcon />
        </IconButton>
        {/* 第一个菜单 */}
        <Menu
          open={activeMenuId === MENU_IDS.MAIN}
          onClose={closeAllMenu}
          // 其他Menu属性如anchorEl按需添加
        >
          <MenuItem onClick={closeAllMenu}>首页</MenuItem>
          <MenuItem onClick={closeAllMenu}>分类</MenuItem>
        </Menu>

        {/* 第二个图标按钮 */}
        <IconButton onClick={() => toggleMenu(MENU_IDS.NOTIFICATION)}>
          <NotificationsIcon />
        </IconButton>
        {/* 第二个菜单 */}
        <Menu
          open={activeMenuId === MENU_IDS.NOTIFICATION}
          onClose={closeAllMenu}
        >
          <MenuItem onClick={closeAllMenu}>通知1</MenuItem>
          <MenuItem onClick={closeAllMenu}>通知2</MenuItem>
        </Menu>

        {/* 剩余两个图标和菜单按照相同逻辑绑定即可 */}
      </Toolbar>
    </AppBar>
  )
}

注意事项 #

• 所有菜单的唯一标识不能重复，否则会出现多个菜单同时展开的问题
• 如果使用的是其他UI库的Menu组件，只需要把open属性替换为对应UI库控制显隐的属性即可，逻辑完全通用
• 该方案没有多余的状态声明，每次状态更新只会触发相关菜单的显隐切换，性能开销极低

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