reactjs – react.js中的动态类

发布时间：2020-12-15 16:20:55 所属栏目：百科来源：网络整理

导读：所有：我想知道我是否制作了一个signin / signup切换选项卡组件,如何动态地将选定的类添加到相应的组件(如ngclass)？ render(){return ( div span className="tab" className={{"selected": this.state.signin}}Sign In/span span className="tab" classNam

所有：

我想知道我是否制作了一个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>
    )
}

解决方法

我建议你使用库 classnames这是一个非常好用的工具.

用法

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,1,{ baz: null },''); // => 'bar 1'

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!