reactjs - 如何隐藏 MUI React ListItem？

Question

我有以下内容：

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

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

Answer 1

As far as I know, there is no hidden props on the ListItem component in Material-UI, so you will have to implement you own behavior to hide the ListItem :

• You can not render the concerned ListItem at all.
• You can render it but hide it using some CSS. See How to display and hide a div with CSS?.

Answer 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 组件。

（旁注：显示道具出现在文档中以执行此操作，但对我不起作用。也许它仅适用于 Box 组件，恰好是文档中所有示例中使用的组件。这是值得的我还没有花时间做的进一步调查。）