Question

ESLint在反应项目上给了我这个错误。

ESLint - 组件应该写成纯函数（反应首选/无状态函数）

它指向组件的第一行。

export class myComponent extends React.Component {
render() {
    return (

      //stuff here

    );
  }
}

如何摆脱此错误？

Answer 1

两种选择。

暂时停用警告

^{（未经测试;有多种方法可以做到这一点。）}

p4 sync //depot/path/...

使用纯无状态组件

返回值是将要呈现的内容（例如，您基本上是在编写基于类的组件＆＃39; // eslint-disable-next-line react/prefer-stateless-function export class myComponent extends React.Component { ... }方法：

render

（或者，如果那是你的话，请使用非ES6表示法。）

对于这样没有其他支持逻辑的组件，我更喜欢隐式返回，例如，

export const myComponent = () => {
  return (
    // JSX here
  )
}

这是一个偏好的问题。我会说你应该遵循React命名约定，并保持所有组件以大写字母开头。

^{ESLint可能会抱怨多行JSX表达式周围缺少parens，因此请禁用该规则或使用parens。}

如果你需要道具，它们会作为函数的参数传入：

export MyComponent = () =>
  <div>
    // Stuff here
  </div>

为方便起见，您可以像往常一样对参数进行解构：

const MyComponent = (props) =>
  <div>
    <Something someProp={props.foo} />
  </div>

export MyComponent

如果您使用本地变量，这可以使隐式返回更容易一些。除非您声明，否则您将收到有关丢失const MyComponent = ({ foo }) => <div> <Something someProp={foo} /> </div>的ESLint警告;因为它不是一个类，你不能简单地在课堂上使用PropTypes，它们必须附加到函数（许多人都喜欢）。

Answer 2

将您的组件编写为无状态函数：

export myComponent = () => { //stuff here };

React中实际上有两种定义组件的样式：功能组件（它们只是从道具到React组件的函数）和类组件。

它们之间的主要区别在于，类组件可以具有state和生命周期方法，例如componentDidMount，componentDidUpdate等。

每当您不需要生命周期状态方法时，您应该将组件编写为无状态函数，因为无状态组件通常更容易推理。

要编写功能组件，可以编写一个带有单个参数的函数。这个论点将获得组件的道具。因此，您不能使用this.props来访问组件的道具 - 您只需使用该函数的参数。

Answer 3

如果你依赖于props，那么有一个更好的（有点可论证的，在撰写本文时）方法来解决这个错误而不写出无状态函数 - 写一个PureComponent并使用这个eslint规则 [source]：

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

根据上述规则，以下代码段有效（因为它取决于props）

class Foo extends React.PureComponent {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

React团队计划围绕SFC进行优化，但他们还没有。因此，在此情况发生之前，SFCs将不会提供超过PureComponents的任何好处。事实上，它们会稍微恶化，因为它们不会阻止浪费的渲染。

Answer 4

如果您所做的只是呈现jsx模板，而不是使用constructor(props)声明状态，那么您应该将您的组件编写为props的纯函数，而不是使用class关键字来定义它。

离。

export const myComponent = () => (
   // jsx goes here  
);

Answer 5

只有当您的类没有任何生命周期方法或构造函数时，才会出现此错误。要解决此问题，您必须禁用lint属性或将其作为纯函数或为类创建构造函数。

Answer 6

添加以下构造函数（）：

exports class myComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>Hello</div>
    );
  }
}

Answer 7

export class myComponent extends PureComponent {
  ...
}

Answer 8

你需要添加构造函数(props)

export class myComponent extends React.Component {
    constructor(props) {
            super(props);
            this.state = {};
        }
    render() {
        return (
    
          //stuff here
    
        );
      }
    }

Answer 9

const myComponent = () => {
return (
  //stuff here

  );
};

export default myComponent;

在app.js文件中，只需导入此组件，就像我们为类

那样

import myComponent from './myComponent.js'

并致电

<myComponent />

它肯定会起作用。

ESLint - 组件应该写成纯函数（反应首选/无状态函数）

9 个答案: