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

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

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

Любые идеи?

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

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

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

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

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

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

В зависимости от того, сколько динамических классов вам нужно добавить по мере роста вашего проекта, вероятно, стоит проверить имена классов полезности по 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 запускает повторную визуализацию при изменении состояния, имена ваших динамических классов обрабатываются естественным образом и обновляются в соответствии с состоянием вашего компонента.

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

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

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

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

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

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

попробуйте это с помощью хуков:

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

и добавьте это в атрибут className:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

добавить класс:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

удалить класс:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

Вы можете использовать этот пакет 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})} />

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

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

className={css(styles.mainDiv, 'subContainer')}

Это решение опробовано и протестировано в React SPFx.

Также добавьте оператор импорта:

import { css } from 'office-ui-fabric-react/lib/Utilities';