В React есть несколько способов условно применять атрибуты класса в JSX в зависимости от определенных условий.

1. Использование оператора условия:

class MyComponent extends React.Component {
  render() {
    const isActive = true
    return <div className={isActive ? "active" : "inactive"}>My component</div>
  }
}

В этом примере мы определяем переменную isActive, которая устанавливается в значение true. В элементе div мы используем оператор условия, чтобы определить, какой класс применить к элементу в зависимости от значения isActive. Если isActive равно true, будет применен класс active, в противном случае - inactive.

2. Использование оператора логического И:

class MyComponent extends React.Component {
  render() {
    const isActive = true
    return <div className={isActive && "active"}>My component</div>
  }
}

В этом примере мы определяем переменную isActive, которая устанавливается в значение true. В элементе div мы используем оператор логического И, чтобы условно применить класс active к элементу, если isActive равно true. Если isActive равно false, класс active не будет применен.

3. Использование библиотеки classnames:

import classNames from "classnames"
 
class MyComponent extends React.Component {
  render() {
    const isActive = true
    const classes = classNames("my-component", {
      active: isActive,
    })
    return <div className={classes}>My component</div>
  }
}

В этом примере мы импортируем библиотеку classnames, которая позволяет более удобно управлять классами в JSX. Мы определяем переменную isActive, которая устанавливается в значение true. Мы используем метод classNames() из библиотеки classnames, чтобы создать строку с классами, которые будут применены к элементу. Мы передаем имя базового класса my-component и объект с ключом active, который определяет, должен ли быть применен класс active в зависимости от значения переменной isActive. Мы передаем строку с классами в атрибут className элемента div.

Это три способа условно применять атрибуты класса в JSX в React. Выберите тот, который наиболее подходит для вашего случая использования.

Назад