Question

我有以下内容：

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

，但ListItem仍然显示。如何隐藏？

Answer 1

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

您根本无法呈现相关的ListItem。
您可以渲染它，但可以使用一些CSS隐藏它。参见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组件。

（旁注：the display prop在文档中似乎是这样做的，但对我却不起作用。也许它仅适用于Box组件，这恰好是本示例中所有示例中使用的组件。 docs。值得进一步调查，我还没有花时间做。）

如何隐藏MUI React ListItem？

2 个答案: