ReactJS 中的内联样式答案

【问题标题】：Inline-styles in ReactJSReactJS 中的内联样式
【发布时间】：2018-01-02 04:26:21
【问题描述】：

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

【问题讨论】：

这样写：style={{backgroundColor:'yellow'}}

标签： javascript css reactjs

【解决方案1】：

将你的内联样式声明为一个对象：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

首先，样式必须作为对象传递。

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

style={{ background: 'yellow' }}

【讨论】：

【解决方案4】：

你需要把它包裹在另一个{}:

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

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

【讨论】：