ReactJS中的内联样式

Question

我是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中直接应用内联样式是否可能？如果是的话，想法是通过条件语句评估状态并在另一个颜色上设置一种颜色。

- Esti

---

样式={{backgroundColor:'黄色'}} - Mayank Shukla

Answer 1

将内联样式声明为对象：

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

- Danny Delott

Answer 2

首先，样式必须作为一个对象进行传递。

其次，CSS值必须是一个字符串。

style={{ background: 'yellow' }}

- kind user

Answer 3

你缺少一组括号和一些引号：

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

React的样式prop需要一个对象({background: 'yellow'})，由于它不是一个简单的字符串，所以你需要在prop周围加上额外的一组括号{{...}}。

- Tyler Sebastian

Answer 4

您需要将其包装在另一个{}中：

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

外部一组{}只是告诉JSX编译器里面是JavaScript代码。内部一组{}创建了一个JavaScript对象字面量。

- Sumner Evans