className里渲染多个类,不加判断
写法一:
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className='hidden myspan'></span>
</div >
)
写法二:
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={'hidden myspan'}></span>
</div >
)
className里渲染多个类,一个判断
写法一:
render() {
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={[this.state.isShow ? '' : 'hidden', 'myspan'].join(' ')}></span>
</div >
)
}
写法二:
render() {
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={`myspan ${this.state.isShow ? '' : 'hidden'}`}></span>
</div >
)
}
写法三:
return (
<div>
<button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
<span className={this.state.isShow ? "myspan" : "myspan hidden"}></span>
</div >
)
总结
四种方法可以实现className的判断加类。
无需第三方模块依赖:
1、ES6模板字符串——``
2、join组成字符串——Array.join('')
3、字符串——''
需要第三方依赖:
className——参考此文
网友评论