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) => {

    handleClickOption() {
        // some code
    }

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

Options.propTypes = {
    // validate props
};

export default Options;

Answer 3

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

＆＃13;

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

＆＃13;

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

E.G：

＆＃13;

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

＆＃13;

然后在这里使用eslint enable编写的ES6样式组件：

＆＃13;

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <header className="header">
        <h1>Home page</h1>
      </header>
    );
  }
}

export default Home;

＆＃13;

Answer 4

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

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

我有类似的问题。有人知道如何在传递的点击功能中调用组件特定的道具。

E.g。

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>
  );
}

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

5 个答案: