ReactJS: условно добавить className с помощью оператора точки
С ReactJS я использую SCSS. Я использую import classes from './component1.module.scss';, а затем обращаюсь к именам классов, используя className = {classes.password}. Однако как я могу динамически добавлять дополнительные классы к элементу на основе условий в этом формате?
@Temp O'rary Проверьте ответ, который я дал. Эта техника часто используется в React. :) Голосуйте и принимайте, если этот ответ полезен;)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вот как мы достигаем этого с помощью JSX.
className = {`${isStateValue ? classes.password: classes.password2 classes.password3}`}
Это тернарный оператор. вы даже можете использовать вложенный троичный код, если у вас есть больше условий.
Просто вы можете использовать обратные кавычки и тернарные операторы внутри ${} и выполнять внутри него условия.
className = {`${props.password ? classes.password : '404class'}`}
className = {`${props.password && classes.password}`}
Хотя для этого подойдут тернарные операторы, если у вас есть более чем несколько экземпляров, где вам нужно использовать этот тип логики, вы можете создать функцию, которая будет принимать список имен классов и возвращать истинные значения.
const cx = (...args) => args.filter(Boolean).join(' ')
<Component className = {cx(classes.password, special && classes.specialPassword)} />
Если вы не хотите писать свою собственную функцию cx, вы также можете использовать одну из следующих библиотек, которые предоставляют те же функции и даже больше:
Используйте тернарии в фигурных скобках, это просто JS? верно