react--className多种写法

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——参考此文