ReactJS：1つのclassNameにバインディングを指定し、もう1つにclassNameを指定しないでください

Question

classNameに動的なclassNameを動的に設定するにはどうすればよいですか？例えば、この中で：私は<button className="cheese {this.state.color}">をすれば https://jsfiddle.net/uwadhwnr/112/

<button className={this.state.color}>、それは引用符で囲んだからthis.state.colorは表示されませんが、私は両方のクラスを持っていると思います。

Answer 1

あなたはクラス名に「チーズ」などの状態色を追加する必要がある場合、あなたは

<button className={"cheese " + this.state.color}> 

の作業コード

var Hello = React.createClass({ 
    getInitialState: function(){ 
     return { 
      color: 'blue' 
     }; 
    }, 
    handleClick: function(){ 
     if (this.state.color === 'blue'){ 
      this.setState({color: 'green'}); 
     } else { 
      this.setState({color: 'blue'}); 
     } 
    }, 
    render: function() { 
     return <button className={"cheese " + this.state.color} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>; 
    } 
}); 

React.render(<Hello name="World" />, document.getElementById('container')); 

JSFIDDLE