ReactJS添加動態類手工課名

Question

我需要一個動態類添加到常規類的列表，但不知道如何（我用巴貝爾），像這樣：

<div className="wrapper searchDiv {this.state.something}"> 
... 
</div> 

任何想法？

感謝

Answer 1

你可以做到這一點，正常的javascript：

className={'wrapper searchDiv ' + this.state.something}

或字符串模板版本

className={`wrapper searchDiv ${this.state.something}`}與反引號。

這兩種類型當然只是JavaScript，但第一種模式是傳統的類型。無論如何，在JSX中，所有以大括號括起來的東西都是以javascript的形式執行的，所以基本上可以做任何你想做的事情。但是結合JSX字符串和花括號是屬性的禁用功能。

Answer 2

取決於您項目增長時需要添加多少個動態類，可能值得在GitHub上檢查JedWatson的classnames實用程序。它允許您將條件類表示爲對象，並返回那些評估爲true的對象。

所以從它的陣營文檔的例子：

render() { 

var btnClass = classNames({ 
    'btn': true, 
    'btn-pressed': this.state.isPressed, 
    'btn-over': !this.state.isPressed && this.state.isHovered 
}); 

return <button className={btnClass}>I'm a button!</button>; 

} 

由於陣營觸發重新繪製時，有一個狀態變化，動態類的名字自然處理，並及時更新與狀態你的組件。

Answer 3

您可以使用this npm軟件包。它處理所有事情，並且可以根據變量或函數選擇靜態和動態類。

// Support for string arguments 
getClassNames('class1', 'class2'); 

// support for Object 
getClassNames({class1: true, class2 : false}); 

// support for all type of data 
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; }, 
    class6 : function() { return true; } 
}); 

<div className={getClassNames({class1: true, class2 : false})} />