如何解决 eslint-react 中的`组件应该写成纯函数`错误？

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 written as a pure function。

那么如何把上面的组件改成纯函数呢？

感谢您的帮助。

Answer 1

React 0.14 引入了纯函数组件。

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

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

Answer 2

在 ES6 中你可能会做类似这样的事情：

const Options = (props) => {

    const handleClickOption = () => {
        // some code
    }

    return (
        <li onClick={handleClickOption}>{props.myOptionsListItem}</li>
    );
};

Options.propTypes = {
    // validate props
};

export default Options;

Answer 3

无状态功能组件将受益于未来针对这些组件的 React 性能优化。 以下是我们可以将组件编写为纯函数的方式：

const App = () => {
  return (
    <div>
      <h2 id="heading">Hello ReactJS </h2>
      <header />
    </div>
  );
};

export default App;

然而，如果你想以 ES6 风格编写组件，你仍然可以这样做，但在这种情况下，需要删除 eslint 错误（如果你使用的是 eslint）。 .eslintrc 文件中的以下更改

例如：

"rules": {
    "react/prefer-stateless-function": "off"
}

那么这里可以使用 eslint enable 编写 ES6 风格的组件：

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <header className="header">
        <h1>Home page</h1>
      </header>
    );
  }
}

export default Home;

Answer 4

这意味着您在没有构造的情况下在 react 中声明有状态组件。场景可以是这样的

import React, { Component } from 'react';

class Something extends Component {
   render() {
      return (
        <div>Your classes</div>
      )
   }
}

上面的代码是错误的，所以正确的代码应该是这样的

class Something extends Component {

   constructor(props) {
      super(props);
      this.props = props;
   }

   render() {
      return (
        <div>Your classes</div>
      )
   }
}

Answer 5

我也有类似的问题。有谁知道如何在传递的点击函数中调用组件特定的道具。

例如

function ElementRow({onClick, element, key}) {
  return (
    <tr key={key}>
      <td><a href="#" onClick={onClick}>Delete</a></td>
      <td>
        ...
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}

在onClick 函数内部，我需要element.id。我正在寻找不使用bind()的解决方案

我知道如何让它与 React.createClass 或 extend React.Component 一起工作，但不是作为纯函数编写的。

编辑：找到了解决方案，但我不确定这是否是代码异味。 :)

function ElementRow({ onClick, element, key }) {
  const _onClick = (e) => {
    onClick(e, element.id);
  };

  return (
    <tr key={key}>
      <td><a href="#" onClick={_onClick}>Delete</a></td>
      <td>
        ...
      </td>
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}