我創建了帶有設定的側邊欄，用戶可以在其中隱藏或顯示他需要的部分。
以下是該組件的外觀：
<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. 如您所見，如果此條件為假，我只會向用戶顯示任何內容，但實際上，在前端它不起作用。編譯后，看起來還是有li標簽的。
這就是它在前端的樣子。
所以，我的問題是，如何完全隱藏這個組件，甚至可能不編譯。我試圖以不同的方式設定不顯示和隱藏，但它仍然不起作用。
uj5u.com熱心網友回復：
我認為這是你應該做的：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/495468.html
標籤：javascript 反应 前端