reactjs - 如何解决eslint-react中的 ` Component should be written as a pure function `错误？

Question

class Option extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOption = this.handleClickOption.bind(this);
  }
  handleClickOption() {
    // some code
  }
  render() {
    return (
      <li onClick={this.handleClickOption}>{this.props.option}</li>
    );
  }
}

我使用eslint-config-airbnb检查上面的代码，它向我显示一条错误消息，例如 Component should be write as a pure function 。

那么如何将上面的组件改为纯函数呢？

感谢您的帮助。

Answer 1

React 0.14 引入了纯函数组件。

这应该是所有无状态组件的首选选项。

function Option({ onClick, option }) {
    return (
        <li onClick={onClick}>
            {option}
        </li>
    );
}