У меня есть следующее:
<ListItem key={name} hidden={true} aria-hidden={true}>
name
</ListItem>
но ListItem
все еще появляется. Как это можно скрыть?
У меня есть следующее:
<ListItem key={name} hidden={true} aria-hidden={true}>
name
</ListItem>
но ListItem
все еще появляется. Как это можно скрыть?
hidden
согласно API (material-ui.com/api/list-item) Вот почему он все еще появляется. 04.04.2019 Насколько я знаю, в компоненте ListItem
в Material-UI нет реквизита hidden
, поэтому вам придется реализовать собственное поведение, чтобы скрыть ListItem
:
ListItem
.Я пытался программно скрыть компонент FormControl Material-UI и обнаружил ту же проблему (то есть отсутствие реквизита 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, которые используются во всех примерах в документации. Это стоит дальнейшего изучения, на которое я еще не тратил время.)