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

Answer 1

将内联样式声明为对象：

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

Answer 2

你错过了一组括号和一些引号：

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

React的样式道具需要一个对象（{background: 'yellow'}），因为它不是一个简单的字符串，所以你需要在prop {{...}}周围增加一组括号。

Answer 3

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

中

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

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

Answer 4

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

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

style={{ background: 'yellow' }}

ReactJS中的内联样式

4 个答案: