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>
}

 

一般在業務邏輯比較復雜的場景下，建議使用函數方法。