Я размышлял о том, как лучше условно применить класс CSS в React JS. Я видел, как некоторые ответы обменивались вокруг, но их там немного, или они просто не так продуманны, как хотелось бы.
Как условно применять классы 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. Я не экспериментировал с этим, поэтому попробую. Если кто-либо найдет иное, пожалуйста, просветите меня.