如何隐藏 MUI React ListItem？答案

【问题标题】：How to hide MUI React ListItem?如何隐藏 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 属性，这就是它仍然出现的原因。

标签： reactjs react-material

【解决方案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 组件，而这恰好是文档中所有示例中使用的组件。这是值得进一步研究的，我还没有花时间去做。）

【讨论】：