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

158

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

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

Любые идеи?

css reactjs Mankind1023
источник

Полезные ответы для лучшего опыта в создании стиля реагирования по ссылке

Рахиль Ахмад

241

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

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

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

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

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

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

dannyjolie
источник

а что в случае нескольких классов?

Пардип Джейн

5

В случае нескольких динамических классов все динамические классы должны приходить из состояния, то есть их невозможно использовать element.classList.add("my-class"); следовательно, учитывая:

className={`wrapper searchDiv ${this.state.something ? "my-class " : ""} ${this.state.somethingElse ? "my-other-class " : ""}`}

Кевин Фарругия

className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'Это не работает Кто-нибудь может сказать почему?

kryptokinght

54

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

Брэд Колхерст
источник

5

Использование classNames для такой простой вещи является излишним. Избегайте его использования и выберите простой ответ dannyjolie

контрольный список

2

Вы уверены, что это простая вещь? Почти всегда вы хотите иметь полный контроль над тем, какие классы применяются к элементам.

Драгас

5

@checklist Я бы сказал, в противном случае, пакет classnames составляет 1,1 КБ до Gzipping (и половина КБ после Gzipping), не имеет никаких зависимостей и предоставляет намного более чистый API для манипулирования именами классов. Нет необходимости преждевременно оптимизировать что-то настолько маленькое, когда API гораздо более выразителен. При использовании стандартных манипуляций со строками вы должны помнить, что необходимо учитывать интервалы, либо перед каждым условным именем класса, либо после каждого стандартного имени класса.

августа

classNames великолепен, я обнаружил, что чтение, добавление и исправление реквизита были проще, чем ручные манипуляции, так как компонент усложнялся.

MiFiHiBye

37

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

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

oligopol
источник

26

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

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

Саад Мирза
источник

Это лучшее решение без каких-либо проблем. Работал как шарм. Спасибо.

Royal.O

3

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

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

Сергей Губарев
источник

2

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

        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
           }));

        }

Хамза Хаттаби
источник

1

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

Тушар Шарма
источник

1

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

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

Харшвардхан Сингх Багел
источник

-1

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

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

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

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

Харджот Сингх
источник

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

Ответы: