Условие пользовательского интерфейса React Material в свойстве стиля кнопки
Мне нужно иметь условие в свойстве стиля кнопки. Вот как выглядит мой код на данный момент.
<Button variant = "outlined" component = "span" className = {classes.button}>
Choose file
</Button>
Мне нужно иметь что-то вроде этого.
<Button variant = "outlined" component = "span" className = {classes.button}
style = {{display: ((this.props.filename === true)? 'none' : 'block') }}
>
Choose file
</Button>
Любая идея, как я могу сделать эту работу?
Ответы 3
Вы были очень близки. Единственный трюк здесь заключается в том, что указание === true в вашем условии пропустит приведение типа к вашей переменной, что на самом деле необходимо в этом случае, поскольку мы хотим проверить, пуста ли строка.
Одним из решений для этого было бы просто удалить его и позволить JavaScript выполнить приведение типов, которое проверяет, является ли строка пустой или нулевой:
<Button variant = "outlined" component = "span" className = {classes.button}
style = {{display: ((this.props.filename) ? 'none' : 'block') }}>
Choose file
</Button>
Эта почта хорошо объясняет, как выполняется преобразование. Дополнительные способы проверки наличия пустой строки в JavaScript, с принудительным или нет, можно найти в этот ТАК пост.
Я думаю, что проблема здесь такая же, как описано здесь: Может ли withStyles передавать реквизиты объекту стилей?
Другой подход — создать отдельные классы: displayNone — когда условие выполнено, и displayBlock — когда нет. Затем используйте библиотеку clsx для объединения двух классов, например так:
import clsx from "clsx"
<Button variant = "outlined" component = "span"
className = {clsx(classes.button,this.props.filename? classes.displayNone:classes.displayBlock)}>
Choose file</Button>