ESLint 在 react 项目中给我这个错误。
组件应该写成一个纯函数（react prefer/stateless 函数）
它指向组件的第一行。
export class myComponent extends React.Component {
render() {
return (
//stuff here
);
}
}
如何摆脱这个错误？
【问题讨论】：
标签： javascript reactjs eslint
两个选择。
暂时禁用警告
（未经测试；有多种方法可以做到这一点。）
// 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等生命周期方法。
当您不需要生命周期方法的状态时，您应该将组件编写为无状态函数，因为无状态组件通常更容易推理。
要编写函数式组件，您需要编写一个接受单个参数的函数。此参数将接收组件的道具。因此，您无需使用 this.props 来访问组件的 props - 您只需使用函数的参数即可。
【讨论】：
如果您依赖props，那么有一种更好的（在撰写本文时有些争议）无需写出无状态函数即可修复此错误的方法 - 通过编写 PureComponent 并使用此 eslint 规则 [source] ：
"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],
有了上面的规则，下面的sn-p是有效的（因为它依赖于props）
class Foo extends React.PureComponent {
render() {
return <div>{this.props.foo}</div>;
}
}
React 团队计划围绕 SFC 构建优化，但尚未实现。所以在这种情况发生之前，SFCs 不会比PureComponents 提供任何好处。事实上，它们会稍差一些，因为它们不会阻止浪费的渲染。
【讨论】：
只有当您的类没有任何生命周期方法或构造函数时，您才会收到此错误。 要解决此问题，您必须禁用 lint 属性或将其设为纯函数或为类创建构造函数。
【讨论】：
const myComponent = () => {
return (
//stuff here
);
};
export default myComponent;
然后在 app.js 文件中导入这个组件，就像我们在类中所做的那样
import myComponent from './myComponent.js'
并调用为
<myComponent />
它肯定会起作用。
【讨论】：
export class myComponent extends PureComponent {
...
}
【讨论】：
如果你所做的只是渲染一个 jsx 模板，而不是用 constructor(props) 声明状态，那么你应该将你的组件编写为 props 的纯函数，而不是使用 class 关键字来定义它。
例如
export const myComponent = () => (
// jsx goes here
);
【讨论】：
你需要添加构造函数(props)
export class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
//stuff here
);
}
}
【讨论】：