ReactJS добавляет динамический класс к ручным именам классов

Мне нужно добавить динамический класс в список обычных классов, но я понятия не имею, как (я использую babel), что-то вроде этого:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

Есть идеи?

Ответ 1

Вы можете сделать это, обычный JavaScript:

className={'wrapper searchDiv ' + this.state.something}

или версия строкового шаблона с обратными галочками:

className={'wrapper searchDiv ${this.state.something}'}

Оба типа, конечно, просто JavaScript, но первый шаблон - традиционный.

В любом случае, в JSX все, что заключено в фигурные скобки, выполняется как JavaScript, так что вы можете делать там все, что захотите. Но объединение JSX-строк и фигурных скобок - атрибуты не нужны.

Ответ 2

В зависимости от того, сколько динамических классов нужно добавить по мере роста вашего проекта, вероятно, стоит проверить утилиту classnames JedWatson на GitHub, Он позволяет представлять ваши условные классы как объект и возвращает те, которые оцениваются как true.

Итак, в качестве примера из его документации React:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

}

Так как React запускает повторную визуализацию при изменении состояния, ваши динамические имена классов обрабатываются естественным образом и обновляются в соответствии с состоянием вашего компонента.

Ответ 3

Простой возможный синтаксис будет:

<div className={'wrapper searchDiv ${this.state.something}'}>

Ответ 4

Вот лучший вариант для Dynamic className, просто сделайте конкатенацию, как мы делаем в Javascript.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

Ответ 5

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

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

Ответ 6

Если вам нужны имена стилей, которые должны отображаться в соответствии с состоянием состояния, я предпочитаю использовать эту конструкцию:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

Ответ 7

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>