Как я могу условно применить класс, который имеет динамический атрибут, в classNames

Question

У меня есть простой div и я хочу добавить его в новый класс. У меня есть 2 атрибута, один - boolean, назовем его myBoolean, другой - число, я назвал его myNumber.

Вот мой код:

<div className={className}></div>

Я хочу добавить новый класс с условием, если мой первый атрибут true.

Примерно так:

<div className={`className ${myBoolean && "has-columns-${myNumber}"}`}></div>

Как мне заставить его работать?

Спасибо.

Answer 1

Попробуйте что-то вроде

<div className={`${className} ${myBoolean && `has-columns-${myNumber}`}`}></div>

Также вы можете попробовать classnames , идеальный помощник для ситуаций, подобных вашей:

1. Установить classnames: npm install classnames --save или yarn add classnames
2. Используйте это так:

import cx from 'classnames';
// ...
<div className={cx(className, { `has-columns-${myNumber}`: myBoolean })}></div>

Дело в том, что вы можете вставить неограниченное количество аргументов в функцию cx, которые могут быть строками,объекты с именами классов и логическими значениями, чтобы указать, должен ли он использоваться или нет. Затем эта функция объединяет все эти имена классов и возвращает одну большую строку, которую вы используете внутри своих компонентов.