Условно применять атрибуты класса в React

В React обычно показывают или скрывают элементы на основе реквизитов, переданных из родительских компонентов. Чтобы добиться этого, вы можете условно применять классы CSS. Однако при использовании синтаксиса {this.props.condition? 'show' : 'hidden'} непосредственно внутри строки.

Чтобы решить эту проблему, переместите фигурные скобки за пределы строки, как показано в этом исправленном примере:

Эта корректировка гарантирует, что условие оценивается перед объединением имен классов. Обратите внимание на пробел после «pull-right», чтобы предотвратить случайное создание класса «pull-rightshow» вместо предполагаемого класса «pull-rightshow». Кроме того, круглые скобки имеют решающее значение для правильной оценки.