[英]How to completely hide Link React component?
I have created sidebar with settings where user can hide or show sections he needs.我创建了带有设置的侧边栏,用户可以在其中隐藏或显示他需要的部分。
Here is how this components looks like:以下是该组件的外观:
<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>
I have problem with peace of code that starts with subsection.show || settings
我对以
subsection.show || settings
开头的代码有问题subsection.show || settings
. subsection.show || settings
。 As you can see, if this condition is false, I just show nothing to user, but in fact, on front end it doesn't work.如您所见,如果此条件为假,我只会向用户显示任何内容,但实际上,在前端它不起作用。 After compile, it still looks like there is
li
tag.编译后,看起来还是有
li
标签。
This is how it looks like on front end.这就是它在前端的样子。
So, my question is, how to completely hide this component, maybe not even compile.所以,我的问题是,如何完全隐藏这个组件,甚至可能不编译。 I was trying to set display none and hidden on different ways, but it still doesn't work.
我试图以不同的方式设置不显示和隐藏,但它仍然不起作用。
I think this is what you are supposed to do:我认为这是你应该做的:
<List>
{section.elements.map((subsection) =>
subsection.show || settings ? (
<ListItem key={subsection.name}>
{settings ? (
<Checkbox
checked={subsection.show}
onChange={() => {
subsection.show = !subsection.show;
setSidebar((prev) => [...prev]);
}}
/>
) : null}
<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>
</ListItem>
) : null
)}
</List>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.