react.js中的动态类

Question

所有：

我想知道我是否制作了一个signin / signup切换选项卡组件，如何动态地将选定的类添加到相应的组件（如ngclass）？

render(){
return (
            <div>
                <span className="tab" className={{"selected": this.state.signin}}>Sign In</span>
                <span className="tab" className={{"selected": !this.state.signin}}>Sign Up</span>
            </div>
    )
}

Answer 1

我建议你使用库类名，这是一个非常好用的工具。

用法

import cx from 'classnames';
...
<span className={cx('tab', {selected: this.state.signin})}>Sign In</span>

在调用函数时，您可以传递默认值和一个对象，以便以任何顺序有条件地添加类。

syntax: cx(default, {conditional: boolean, conditional: boolean});
syntax: cx({conditional: boolean, conditional: boolean}, default);
syntax: cx(something, {conditional: boolean}, 'something', 'something');

我更喜欢按照默认字符串，条件的顺序一致地使用它。 只是为了我和其他人的可读性，当你期望它是相同的时候很容易。

你可以传递很多不同的东西并处理它。 来自NPM文档

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: true, bar: true }); // => 'foo 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

你可以使用模板文字``

在你的情况下，它看起来像这样：

<span className={`tab ${this.state.signin ? "selected" : ""}`}>Sign In</span>

Answer 3

虽然约翰的回答是约翰。 该库缺乏确定价值的功能支持。

你可以使用这个 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})} />