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. Це дозволяє представляти свої умовні класи як об'єкт і повертає ті, що оцінюють, до істинних.

Отже, як приклад з його документації 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';