如何隐藏 MUI React ListItem？

Posted 2023-05-08

【中文标题】如何隐藏 MUI React ListItem？

【英文标题】：How to hide MUI React ListItem?

【发布时间】：2019-08-25 12:36:23

【问题描述】：

我有以下几点：

<ListItem key=name hidden=true aria-hidden=true>
  name
</ListItem>

但ListItem 仍然出现。怎么隐藏？

【问题讨论】：

根据 api (material-ui.com/api/list-item) 它没有 hidden 属性，这就是它仍然出现的原因。

【参考方案1】：

据我所知，Material-UI 中的 ListItem 组件上没有 hidden 道具，因此您必须实现自己的行为来隐藏 ListItem ：

您根本无法渲染相关的ListItem。 您可以渲染它，但使用一些 CSS 隐藏它。见How to display and hide a div with CSS?。

【参考方案2】：

我希望以编程方式隐藏 Material-UI FormControl 组件，但发现了同样的问题（即缺少 hidden 道具）。

对我有用的是添加一个返回适当类字符串的方法，这取决于我是否想显示有问题的组件。

例如，样式如下：

const styles = createStyles(
    ...
    formcontrol: 
        minWidth: 120,
        margin: 10
    ,
    invisible: 
        visibility: "hidden"
    ,
);

我将此添加到我的组件类中：

getStyle() 
    let cls: string;
    if (this.props.whatever) 
        cls = this.props.classes.formcontrol;
     else 
        cls = this.props.classes.invisible + " " + this.props.classes.formcontrol;
    
    return cls;

然后在创建我有时想要隐藏的组件时从render() 引用它：

<FormControl className=this.getStyle()>
...
</FormControl>

这应该适用于任何样式化的 MUI 组件。

（旁注：the display prop 出现在文档中来执行此操作，但对我不起作用。也许它仅适用于 Box 组件，而这恰好是文档中所有示例中使用的组件。这是值得进一步研究的，我还没有花时间去做。）