ReactJS中的内联样式

我是ReactJS的新手。点击时，我试图同时更改按钮的文字和颜色。此代码的工作原理：ReactJS中的内联样式

class ToggleHelp extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isHelpOn: true}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isHelpOn: !prevState.isHelpOn 
    })); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
     </button> 
    ); 
    } 
} 

ReactDOM.render(
    <ToggleHelp />, 
    document.getElementById('root') 
);

但是，当我尝试使用以下内联样式时，代码停止工作。

<button style={background:yellow} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button>

我试了几次，以各种方式做。我希望它现在成为一种内联风格。是否可以直接从React应用内联样式？如果是的话，这个想法是评估状态并通过条件语句在另一个颜色上设置一种颜色。

来源

2017-07-26 Esti

写这样的：'风格= {{的backgroundColor： '黄'}}' –

@MayankShukla人仍下落不明引号 –

@MayankShukla ...不是真的... –

声明的内嵌样式作为一个对象：

<button style={{ background: 'yellow' }} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button>

来源

2017-07-26 17:36:08

你缺少一套支架和一些报价：

<button style={{background: 'yellow'}} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button>

阵营的风格道具预计的对象（{background: 'yellow'}），并因为它的不是一个简单的字符串，你需要围绕道具{{...}}的额外设置。

来源

2017-07-26 17:36:12

你需要用它在另一个{}：

<button style={{background:'yellow'}} onClick={this.handleClick}> 
    {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'} 
</button>

外集{}的只有我告诉JSX编译器，里面有什么是JavaScript代码。 {}的内部集创建了一个JavaScript对象文字。

来源

2017-07-26 17:36:23

首先风格必须是作为对象通过。

其次-css值必须是的一个字符串。

style={{ background: 'yellow' }}

来源

2017-07-26 17:36:23

ReactJS中的内联样式

回答

相关问题