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

Posted 2023-02-22

【中文标题】ReactJS：有一个带有绑定的类名和另一个没有绑定的类名

【英文标题】：ReactJS: Have one className with binding and another className without

【发布时间】：2017-08-22 07:40:47

【问题描述】：

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

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

【问题讨论】：

Concatenating variables and strings in React的可能重复

【参考方案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