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添加到＆＃34; cheese＆＃34;然后你可以像

那样做

<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

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

1 个答案: