现在我有一个包含MenuItem组件列表的菜单：
<MenuItem>A</MenuItem>
<MenuItem>B</MenuItem>
<MenuItem>C</MenuItem>
我想将组件的样式设置为仅在布尔值为 true 时可见（如 isLoggedIn）我该怎么做？我不想手动为每个菜单项添加条件，因为我有一百个
const PrivateMenuItem = styled.MenuItem` \\what to write here `;
<PrivateMenuItem>A</PrivateMenuItem>
<PrivateMenuItem>B</PrivateMenuItem>
<PrivateMenuItem>C</PrivateMenuItem>
您可以创建一个为您处理它的组件：
export default const PrivateMenuItem = ({show=true, children})={
return show && <MenuItem>{children}</MenuItem>
}
如果你想用样式隐藏它，你可以像这样使用它：
export default const PrivateMenuItem = ({show=true, children})={
return show ?
<MenuItem className={styles.show}>{children}</MenuItem> :
<MenuItem className={styles.hide}>{children}</MenuItem>
}
稍后您可以使用：
<PrivateMenuItem show={true}>A</PrivateMenuItem>
<PrivateMenuItem show={false}>B</PrivateMenuItem>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句