Javascript 如何完全隐藏 Link React 组件

我已经创建了边栏，其中包含用户可以隐藏或显示所需部分的设置.

以下是这些组件的外观:

<List>
 {section.elements.map((subsection) => (
   <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>

我对以subsection.show || settings开头的代码和平有问题.正如您所看到的，如果这个条件为false，我只是不向用户显示任何内容，但实际上，在前端它不起作用.编译后，看起来仍然有li个标记.

这是前端的样子.

所以，我的问题是，如何完全隐藏这个组件，甚至可能不编译.我试图以不同的方式设置"无显示"和"隐藏"，但仍然不起作用.