如何將變量分配給元素== React中的某些內容？

Question

我是React的新人，曾與Angular合作過很多次。 在角是儘可能簡單，這取決於這樣的變量分配一些類：

<p ng-class="{warning: warningLevel==3, critical: warningLevel==5}">Mars attacks!</p> 

我如何做反應的模板中類似的事情？

Answer 1

簡短的回答：使用classSet()：http://facebook.github.io/react/docs/class-name-manipulation.html

較長的答案：

這是沒有太大的不同的反應，除了你寫一個普通的舊JavaScript，因此很多控制這裏。此外，React已經有了一個漂亮的插件，使它更容易。在這種情況下，您的組件將是這個樣子：

var ClassnameExample = React.createClass({ 
    render: function() { 
    var cx = React.addons.classSet; 
    var classes = cx({ 
     "message": true, 
     "warning": this.props.warningLevel === "3", 
     "critical": this.props.warningLevel === "5" 
    }); 
    return <p className={classes}>Test</p>; 
    } 
}); 

這裏是工作示例：http://jsbin.com/lekinokecoge/1/edit?html,css,js,output

剛剛嘗試改變這裏的值：

React.renderComponent(<ClassnameExample warningLevel="3" />, document.body); 

Answer 2

到classSet另一種方法是經常使用簡單的對象查找。

var levelToClass = { 
    "3": "warning", 
    "5": "critical" 
}; 

// ... 
render: function(){ 
    var level = levelToClass[this.props.warningLevel] || ""; 
    return <p className={"message " + level}>Test</p> 
} 

或在某些情況下，三元：

render: function(){ 
    var level = this.props.warningLevel === 3 ? "warning" 
      : this.props.warningLevel === 5 ? "critical" 
      : ""; 
    return <p className={"message " + level}>Test</p> 
}