Блог

Главная - Вопросы по программированию - ReactJS: условное добавление имени класса с помощью оператора dot

ReactJS: условное добавление имени класса с помощью оператора dot

#javascript #css #reactjs #sass

#javascript #css #reactjs #sass

Вопрос:

С ReactJS я использую SCSS. Я использую import classes from './component1.module.scss'; , а затем получаю доступ к именам классов с помощью className={classes.password} . Однако, как я могу динамически добавлять дополнительные классы к элементу на основе условий в этом формате?

Комментарии:

1. Используйте троичные числа в фигурных скобках, это простой JS? правильно

2. @Temp O’rary Проверьте ответ, который я предоставил. Этот метод часто используется в React. 🙂 Проголосуйте и примите, если этот ответ полезен 😉

Ответ №1:

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

 const cx = (...args) => args.filter(Boolean).join(' ')

<Component className={cx(classes.password, special amp;amp; classes.specialPassword)} />

Если вы не хотите писать свою собственную cx функцию, вы также можете использовать одну из следующих библиотек, которые предоставляют те же функции и многое другое:

  1. https://www.npmjs.com/package/classnames
  2. https://www.npmjs.com/package/clsx

Ответ №2:

Вот как мы добиваемся этого из JSX.

 className={`${isStateValue ? classes.password: classes.password2 classes.password3}`}

Это используемый троичный оператор. вы даже можете использовать вложенный троичный также, если у вас есть больше условий.

Ответ №3:

Просто вы можете использовать обратные и троичные операторы внутри ${} и выполнять условия внутри него.

 className={`${props.password ? classes.password : '404class'}`}
className={`${props.password amp;amp; classes.password}`}