Условный рендеринг в теге HTML

Question

Я должен проверить, доступен ли пользователь, если так установлен стиль фона.Я могу просто сделать это через PHP с помощью оператора if, хотя, как бы это было сделано с реагировать?

Что у меня есть:

<a className={classes} onClick={this.toggleDialog} { theUser.get('isAvailable') == 1 && style={{backgroundColor: "rgba(39, 174, 96, .15)"}} }  > 

{theUser.get('first_name')}

</a>

Answer 1

Использование троичного оператора для встроенного стиля:

<a style={ theUser.get('isAvailable') == 1 ? { backgroundColor: "rgba(39, 174, 96, .15)" } : {} } />

Это возможность использовать имена классов условно , потому что это намного чище: (уже есть большойбиблиотека, имена классов ):

const classes = classNames({
  'available': theUser.get('isAvailable') == 1,
  'italics': true, // Will add `italics` className
  'bold': false, // Won't add `bold` className
})

<a className={classes} />

Answer 2

Существует несколько способов использования условных выражений в React:

If / Else

Запрет рендеринга с нулевым значением

Переменные элемента

Тернарный оператор

Оператор короткого замыкания (&&)

Выражения с немедленным вызовом функции (IIFE)

Подкомпоненты

Компоненты высокого порядка (HOCs)

Если вы новичок, чтобы реагировать, я настоятельно рекомендую прочитать следующее: https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e