ReactJS：有一个带有绑定的类名，而另一个没有绑定的类名

Question

如何拥有一个静态类名和一个动态类名？例如，在此： https: //jsfiddle.net/uwadhwnr/112/

<button className={this.state.color}>，如果我这样做<button className="cheese {this.state.color}">， this.state.color 将不会渲染，因为它在引号中，但我想同时拥有这两个类。

Answer 1

如果您需要将状态颜色作为 className 添加到“cheese”，那么您可以这样做

<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