ESLint 在react项目中给了我这个错误。
组件应该写成一个纯函数（react优先/无状态函数）
它指向组件的第一行。
export class myComponent extends React.Component {
render() {
return (
//stuff here
);
}
}
我如何摆脱这个错误？
ESLint - 组件应编写为纯函数（react优先/无状态函数）
IT技术
javascript
reactjs
eslint
2021-03-28 01:30:58
6个回答
两个选择。
暂时禁用警告
（未经测试；并且有多种方法可以做到这一点。）
// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
...
}
使用纯无状态组件
返回值是将要呈现的内容（例如，您基本上是在编写基于类的组件的render方法：
export const myComponent = () => {
return (
// JSX here
)
}
（或者，如果您愿意，请使用非 ES6 符号。）
对于像这样没有其他支持逻辑的组件，我更喜欢隐式返回，例如，
export MyComponent = () =>
<div>
// Stuff here
</div>
这是一个偏好问题。不过，我会说你应该遵循 React 命名约定，并让所有组件都以大写字母开头。
ESLint 可能会抱怨多行 JSX 表达式缺少括号，因此禁用该规则或使用括号。
如果您需要props，它们将作为参数传入函数：
const MyComponent = (props) =>
<div>
<Something someProp={props.foo} />
</div>
export MyComponent
为方便起见，您可以像往常一样在参数中解构：
const MyComponent = ({ foo }) =>
<div>
<Something someProp={foo} />
</div>
如果您使用本地变量，这可以使隐式返回更容易一些。PropTypes除非您声明它们，否则您将收到有关丢失的 ESLint 警告；因为它不是一个你不能简单地static propTypes在类中使用的类，所以它们必须附加到函数中（无论如何很多人都喜欢）。
添加constructor()像：
exports class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>Hello</div>
);
}
}
将您的组件编写为无状态函数：
export myComponent = () => { //stuff here };
React 中实际上有两种定义组件的风格：函数式组件（只是从 props 到 React 组件的函数）和类组件。
它们之间的主要区别是，类组件可以具有state和生命周期方法如componentDidMount，componentDidUpdate等
当您不需要生命周期方法的状态时，您应该将组件编写为无状态函数，因为无状态组件通常更容易推理。
要编写函数式组件，您需要编写一个接受单个参数的函数。此参数将接收组件的props。因此，您不使用this.props访问组件的 props - 您只使用函数的参数。
如果您依赖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。事实上，它们会稍微糟糕一些，因为它们不会防止浪费渲染。
只有当您的类没有任何生命周期方法或构造函数时，您才会收到此错误。要解决此问题，您必须禁用 lint 属性或将其设为纯函数或为类创建构造函数。