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

Question

我如何拥有一个静态的 className 和一个动态的 className？例如，在这个： https://jsfiddle.net/uwadhwnr/112/

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

Answer 1

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

<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