Использовать третичный оператор в теге jsx для атрибута?

Question

У меня немного странный вопрос, но до сих пор я не нашел этот вопрос где-то заданным.

Если я попытаюсь условно отобразить имя класса с помощью jsx, я сделаю что-то вроде этого:

<input 
{...input}
type={type}
className="form__input"
classname={boolean ? "boo" : null}
/>

С логическим атрибутом типа «отключен» это, похоже, не работает.E. g.:

<input 
{...input}
type={type}
className="form__input"
{disabled ? "disabled" : null}
/>

Это кажется логичным, поскольку я не хочу вставлять строку в качестве атрибута jsx.Но неужели нет другого пути, кроме как условно отобразить весь тег jsx?

if (boolean) { <input disabled />} } else { <input /> }

Answer 1

Как Федеркун указал в комментариях, вы можете просто сделать:

<input 
{...input}
type={type}
className="form__input"
disabled={disabled}
/>

Если логическое значение истинно, атрибут будет включен как пустой атрибут.Если оно ложно, атрибут не будет включен.

Вы можете увидеть обсуждение расширения JSX для поддержки этого поведения еще в 2014 году здесь: https://github.com/facebook/react/issues/961

Answer 2

disabled это не атрибут HTML, а JSX.Они предназначены для удобного использования с выражениями JavaScript.

disabled prop без значения аналогично disabled={true}, тогда как disabled={false} prop приведет к атрибуту disabledне добавляется.

Учитывая, что переменная disabled является логическим значением, она должна быть:

<input 
{...input}
type={type}
className="form__input"
disabled={disabled}
/>