ESLint

Question

ESLint 在 React 项目上给我这个错误。

Component should be written as a pure function (react prefer/stateless function)

指向组件的第一行

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

      //stuff here

    );
  }
}

如何摆脱这个错误？

Answer 1

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

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

在 React 中实际上有两种定义组件的样式：函数式组件（只是从 props 到 React 组件的函数）和 class 组件。

它们的主要区别在于class组件可以有state和生命周期方法如componentDidMount、componentDidUpdate等

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

要编写功能组件，您需要编写一个接受单个参数的函数。此参数将接收组件的道具。因此，您不使用 this.props 来访问组件的道具 - 您只需使用函数的参数。

Answer 2

如果你所做的只是渲染一个 jsx 模板，而不是用 constructor(props) 声明状态，那么你应该将你的组件写成一个纯函数的 props，而不是使用 class关键字来定义它。

例如

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

Answer 3

两种选择。

暂时禁用警告

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

// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
  ...
}

使用纯无状态组件

return 值是将要呈现的值（例如，您基本上是在编写基于 class 的组件的 render 方法：

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

（如果您喜欢，也可以使用非 ES6 表示法。）

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

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

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

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

如果您需要道具，它们将作为参数传递给函数：

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

export MyComponent

为了方便，您可以像往常一样在参数中解构：

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

如果您使用本地变量，这可以使隐式 return 更容易一些。除非您声明它们，否则您将收到关于缺少 PropTypes 的 ESLint 警告；因为它不是 class，所以你不能简单地在 class 中使用 static propTypes，它们必须附加到函数（无论如何很多人都喜欢）。

Answer 4

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

Answer 5

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

  );
};

export default myComponent;

并且在 app.js 文件中只导入这个组件，就像我们为 class 做的那样

import myComponent from './myComponent.js'

并调用为

<myComponent />

一定会成功的。

Answer 6

如果您依赖 props，那么有一个更好的（在撰写本文时有些争议）无需编写无状态函数即可修复此错误的方法 - 通过编写 PureComponent and using this eslint rule [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 7

添加constructor()喜欢：

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

Answer 8

export class myComponent extends PureComponent {
  ...
}

Answer 9

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

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

ESLint - 组件应该写成纯函数（react prefer/stateless 函数）

ESLint - Component should be written as a pure function (react prefer/stateless function)

javascript

reactjs