Question

我一直在思考如何在React JS中有条件地应用CSS类。我已经看到一些答案，但是那里没有很多，或者它们并不像我想的那样精致。

Answer 1

manipulating class names上的React文档提出了classnames NPM包。

该软件包的文档很棒。

以下代码段直接来自包README：Usage section

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'

Answer 2

没有classNames库，您可以简单地将类声明为状态，如下所示：

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

Answer 3

使用类名库https://github.com/JedWatson/classnames

classNames函数接受任意数量的参数，可以是a 字符串或对象。如果密钥的值是假的，它不会包含在输出中。

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

看看文档，如果您有任何问题，请告诉我们！

干杯

Answer 4

对于记录，我认为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>

Answer 5

其他作者在上面的评论中下面说明的解决方案对我有效

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

如果要添加更多的类，则添加一个，然后添加以空格分隔的类。

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

Answer 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>

Answer 8

许多答案都假设这是有条件地切换CSS类（如果足够，则使用三元类），但是当您需要选择包括类名时，这变得更加晦涩。带有错误表达式为空的三元ifs是冗长的。 NPM软件包可能有点。对于某些人来说，功能也可能是过大的。

这是我的工作。

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

Answer 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文件中设置样式。我实际上没有尝试过这个，所以我会尝试一下。如果有人发现，请赐教。

如何在React JS中有条件地应用CSS类

9 个答案: