Как условно применять классы CSS в React JS

Ответ 1

Документация Реагировать на манипулирование имен классов предлагает classnames пакета НОГО.

Документы для пакета отличные.

Следующий фрагмент прямо из пакета README: раздел использования

classNames('foo', 'bar');                 // => 'foo bar'
classNames('foo', { bar: true });         // => 'foo bar'
classNames({ 'foo-bar': true });          // => 'foo-bar'
classNames({ 'foo-bar': false });         // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: false, bar: true });    // => 'bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); 
// => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); 
// => 'bar 1'

Ответ 2

Без библиотеки classNames вы можете просто обусловить состояние следующим образом:

<div className={ this.state.end ? 'hidden' : 'shown' }>
    text
</div>

Ответ 3

Использовать библиотеку Classnames https://github.com/JedWatson/classnames

Функция classNames принимает любое количество аргументов, которые могут быть строка или объект. Если значение ключа ложно, оно не будет включено в выход.

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      'btn': true,
      'btn-pressed': false,
      'btn-over': true
    });
    // output: btnClass = "btn btn-over"
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

Взгляните на документ и дайте мне знать, если у вас есть какие-либо вопросы!

Приветствия

Ответ 4

Решение, которое изложено ниже другим автором в вышеупомянутом комментарии, работает для меня

<div className={ this.state.end ? 'hidden' : 'shown' }>text</div>

Просто добавьте, если вы хотите добавить больше классов, а затем добавить класс, разделенный пробелом.

Ответ 5

Для записи я думаю, что ответы библиотеки classnames являются наиболее правильными, но если вы не хотите тянуть другую зависимость, вы можете свернуть свою собственную простую реализацию, которая работает как jQuery:

function getClassBuilder () {
    return {
        array: [],
        add: function (className) {
            if (this.array.indexOf(className) < 0) {
                this.array.push(className);
            }
        },
        remove: function (className) {
            var index = this.array.indexOf(className);
            if (index > -1) {
                this.array.splice(index, 1);
            }
        },
        toString: function () {
            return this.array.join(' ');
        }
    }
}

тогда, когда вам нужно его использовать:

var builder = getClassBuilder();
builder.add('class1');
builder.add('class2');
if (condition) { builder.remove('class1') };

<a href="#" className={builder.toString()}>Button</a>

Ответ 6

Я проиллюстрирую на классах начальной загрузки, изменит цвет текста условно: если count = 0, текст будет красным, в противном случае будет синим

class Counter extends Component {
  state = { count: 6 };

  render() {
let classes="text-center" //class is reserved word in react.js
classes+= (this.state.count===0) ? "text-danger" : "text-primary"
    return (
      <div>
        <h2 className={classes}>Hello World</h2>
      </div>
    );
  }
  formatCount() {
    const { count } = this.state;
    return count === 0 ? "zero" : count;
  }
}

Ответ 7

Если вам нужно добавить условный класс в существующий класс, он может дать вам идею

<span className={'fa ' + (this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down')}></span>

в этом примере я показываю значок стрелки для раскрывающегося списка в зависимости от состояния раскрывающегося списка. Мне нужно сохранить класс fa для любого случая, чтобы установить семейство шрифтов диапазона, и мне нужно только переключаться между fa-angle-up и fa-angle-down.

Тот же пример с литералами шаблона

<span className={'fa ${this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down'}'}></span>

Ответ 8

Многие ответы предполагают, что речь идет об условном переключении классов CSS (троичных, если это достаточно), но это становится гораздо более тупым, когда вам необязательно включать имена классов. Многократные троичные ifs с пустыми ложными выражениями многословны. Пакет NPM может быть немного. Функция также может быть излишней для некоторых.

Вот что я делаю.

const classNames = [
  "className1",
  condition1 && "className2",
  condition2 && "className3",
  condition3 && "className4",
].filter(e => e).join(" ");

Ответ 9

Хорошо, поэтому я экспериментировал, и оказалось, что есть способы, и это не так сложно, как я думал. Это может помочь тем, кто только начинает работать в React JS.

Итак, есть два способа сделать это и две причины добавления стилей в строке:

(1) Добавить имя класса внутри атрибута style в качестве объекта, чтобы его можно было нарисовать внутри обычной таблицы стилей CSS, непосредственно внутри JSX файла или использоваться для условного CSS

ПРИМЕР 1

const classNameAsAPlainObject = {
        color: '#333333',
        backgroundColor: '#999999'
}

<a href="#" className="an-existing-class" style={classNameAsAPlainObject} >
Button
</a>

ПРИМЕР 2

const conditionIsSomething = {
    color: 'red'
}
<a href="#" className="an-existing-class" style={conditionIsSomething ? 'classNameBasedOnCondition' : ' ' }>
Button
</a>

Во втором примере могут быть объявлены два разных класса в зависимости по желаемому результату или один класс может быть объявлен, если условие истинно или none, если условие ложно.

(2) Добавьте его в обычный атрибут className, где требуется условие, но обязательно для размещения существующих имен классов и имейте в виду, что этот метод требует стилизации в обычном файле CSS. Если условие не требуется, добавьте класс как нормальный к атрибуту className.

ПРИМЕР 3

<a href="#" className={"an-existing-class " + (conditionIsSomething ? 'thisClass' : 'thatClass')}>
Button
</a>

ПРИМЕР 4

<a href="#" className={"an-existing-class " + (conditionIsSomething ? 'aClassIsAdded' : ' ')}>
Button
</a>

Опять же, если это условие требует этого, один класс может быть объявлен или нет как показано в примере 4. Обязательно оставляйте пробел в любом случае после "существующий класс" и перед закрывающей цитатой, так что пространство для условного класса.

Итак, я полагаю, что общее правило заключается в том, что вы добавляете класс и стиль в качестве объекта (как в примере 1 и 2), вы можете стилизовать его в файле JSX, но если добавить имя класса в Атрибут "className", вы будете ставить его внутри обычного файла CSS. Я не экспериментировал с этим, поэтому попробую. Если кто-либо найдет иное, пожалуйста, просветите меня.