react class的写法

最近在学习react

写demo的时候 发现className有很多种写法 总结一下：

 1.默认写法

<div className="classA classB"></div>

2.动态class

1）单个动态class：

使用三元运算符：

<div className={this.state.editing ? 'active' : ''}></div>

或者使用逻辑运算符：

<div className={this.state.editing && 'active'}></div>

 

2）多个动态class：

<div className={['classA classB', this.state.editing ? 'active' : ''].join(' ')}></div>

className不支持数组语法，它的值必须是一个字符串。

因此写成数组形式注意要通过join('')将数组转为字符串

如果不使用join(' ')方法 最后得到的element如下：

<div class="classA classB,active"></div>

可以看到，中间多了个逗号，这样的class是无效的。

 

也可以使用ES6的模板字符串形式：

<div className={`classA classB ${this.state.editing ? 'active' : ''}`}></div>

 

以上为内联在模板里的写法，还可以写成函数形式：

getClassName() {
  const str = 'classA classB'
  return this.state.editing ? str + ' active' : str;
}
  
renderHello(){
  return <div className={ this.getClassName() }>hello world</div>
}

 

一般在业务逻辑比较复杂的场景下，建议使用函数方法。