React中Material UI的AppBar下MenuItem条件渲染不生效问题求解

算力阿峰

2026-9-24

问题根因

你写的条件判断仅对移动端（屏幕宽度xs区间）的折叠菜单生效，桌面端（屏幕宽度md及以上）的导航按钮是直接遍历写死的pages数组渲染的：

const pages = ["Conditions", "Winner", "Submission", "Submissions", "Login"];
// 桌面端直接遍历所有pages，未做权限过滤
{pages.map((page) => (
  <Button
    key={page}
    onClick={handleCloseNavMenu}
    sx={{ my: 2, color: "white", display: "block" }}
  >
    {page}
  </Button>
))}

这就是条件判断看起来被忽略的核心原因：两套终端的导航渲染逻辑没有同步做权限控制。

修复方案

将桌面端的按钮渲染逻辑和移动端保持一致，增加角色权限判断，参考修改代码如下：
替换原桌面端Box内的pages.map部分：

<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
  {/* 通用权限菜单项 */}
  <Button
    key="conditions"
    onClick={handleCloseNavMenu}
    sx={{ my: 2, color: "white", display: "block" }}
  >
    Conditions
  </Button>
  <Button
    key="winner"
    onClick={handleCloseNavMenu}
    sx={{ my: 2, color: "white", display: "block" }}
  >
    Winner
  </Button>

  {/* 角色专属菜单项 */}
  {context.token && context.userRole === "USER" && (
    <Button
      key="submission"
      onClick={handleCloseNavMenu}
      sx={{ my: 2, color: "white", display: "block" }}
    >
      Submission
    </Button>
  )}
  {context.token && context.userRole === "JUDGE" && (
    <Button
      key="submissions"
      onClick={handleCloseNavMenu}
      sx={{ my: 2, color: "white", display: "block" }}
    >
      Submissions
    </Button>
  )}

  <Button
    key="login"
    onClick={handleCloseNavMenu}
    sx={{ my: 2, color: "white", display: "block" }}
  >
    Login
  </Button>
</Box>

如果不想重复写代码，也可以先根据当前用户权限过滤pages数组再遍历渲染，逻辑完全一致。