如何彻底隐藏React Link组件 避免残留无效li标签

修复方案 #

要实现条件不满足时完全不生成对应DOM，直接把整个<ListItem>纳入条件判断即可，不需要渲染空的列表项外壳。
修正后完整代码：

<List>
  {section.elements.map((subsection) => (
    // 非设置模式+项被隐藏时直接返回null，不生成任何DOM节点
    !settings && !subsection.show ? null : (
      <ListItem key={subsection.name}>
        {settings ? (
          <Checkbox
            checked={subsection.show}
            onChange={() => {
              subsection.show = !subsection.show
              setSidebar((prev) => [...prev])
            }}
          />
        ) : null}
        {subsection.show || settings ? (
          <Link href={section.routePrefix + subsection.href} passHref>
            <Button
              sx={{
                color: router.pathname.includes(`${section.routePrefix + subsection.href}`)
                  ? 'secondary.main'
                  : 'primary.main',
                width: "100%",
                justifyContent: "start"
              }}
              startIcon={subsection.icon}
            >
              {subsection.name}
            </Button>
          </Link>
        ) : null}
      </ListItem>
    )
  ))}
</List>

逻辑说明 #

• 遍历子项时优先做拦截判断：不在设置模式、且当前子项被用户配置为隐藏时，直接返回null，React不会为该子项生成任何DOM节点，彻底解决空标签残留问题。
• 设置模式下所有子项正常渲染，同时展示配置复选框和菜单项预览，符合配置场景的交互逻辑。
• 完全通过React原生条件渲染控制节点输出，不需要额外写隐藏样式，不存在样式覆盖问题，渲染性能更好。

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