React如何根据isLoggedIn登录状态条件渲染导航菜单按钮

你已经通过useSelector正确拿到了登录状态字段isLoggedIn，直接在JSX结构中使用三元运算符做条件渲染即可满足需求，同时注意修正原代码中的属性写法错误。

核心实现逻辑 #

• 当isLoggedIn === true时，仅渲染Dashboard入口按钮
• 当isLoggedIn === false时，渲染注册（Sign up）、登录（Log In）两个按钮
• 条件判断直接写在JSX的列表容器内部，完全保留原有响应式布局逻辑（sm/md断点的元素隐藏、移动端侧边栏唤起按钮逻辑不受影响）

修改后的完整组件代码 #

const classes = useStyles();
const account = useSelector((state) => state.account);
const { isLoggedIn } = account;

return (
  <Toolbar disableGutters className={classes.toolbar} {...rest}>
    <div className={classes.flexGrow} />
    <Hidden smDown>
      <List className={classes.navigationContainer}>
        {
          isLoggedIn ? (
            // 登录态展示Dashboard按钮
            <ListItem className={classes.listItem}>
              <Button
                size="large"
                variant="contained"
                color="primary"
                component="a"
                target="_blank"
                href="/dashboard"
                className={classes.listItemButton}
              >
                Dashboard
              </Button>
            </ListItem>
          ) : (
            // 未登录态展示注册、登录按钮
            <>
              <ListItem className={classes.listItem}>
                <Typography
                  variant="body1"
                  color="textSecondary"
                  className={classes.listItemText}
                  component="a"
                  href="/register"
                >
                  Sign up
                </Typography>
              </ListItem>
              <ListItem className={classes.listItem}>
                <Button
                  size="large"
                  variant="contained"
                  color="primary"
                  component="a"
                  target="_blank"
                  href="/login"
                  className={classes.listItemButton}
                >
                  Log In
                </Button>
              </ListItem>
            </>
          )
        }
      </List>
    </Hidden>
    <Hidden mdUp>
      <IconButton
        className={classes.iconButton}
        onClick={onSidebarOpen}
        aria-label="Menu"
      >
        <MenuIcon />
      </IconButton>
    </Hidden>
  </Toolbar>
);

补充说明 #

• 未登录态的两个平级列表项使用空标签<>...</>（React Fragment）包裹，不会额外生成冗余DOM节点，完全兼容原有样式规则
• 原代码两处小问题已同步修正：一是Dashboard的href使用了中文引号会导致属性解析失败，二是target="blank"不符合规范，标准新窗口打开写法为target="_blank"
• 后续如果需要扩展登录态菜单项（比如个人中心、退出登录按钮），直接在三元表达式的isLoggedIn为true的分支内追加对应ListItem即可
• Redux状态更新时会自动触发当前组件重渲染，菜单切换不需要额外写事件监听逻辑

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