ESLint - 组件应写为纯函数（反应偏好/无状态函数）

Question

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

ESLint - 组分应写为一个纯函数（发生反应喜欢/无国籍功能）

它指向该部件的第一行。

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

     //stuff here 

    ); 
    } 
} 

我该如何摆脱这个错误？

Answer 1

有两种选择。

暂时禁用警告（未经测试，有多种方法可以做到这一点）

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

写它作为一个纯粹的无状态组件

返回值被用作render基于类的组件的方法：

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

（或者使用非ES6符号，如果这是你的事。）

对于没有其他配套的逻辑我更喜欢含蓄的回报，例如像这样的部件，

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

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

如果你需要的道具，他们通过在作为参数传递给函数：

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

export MyComponent 

而且你可以在参数解构：

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

这可以使隐含回报如果你使用本地变量，那么容易一点。

Answer 2

写您的组件作为一个无状态的功能：

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

实际上有两种风格定义组分反应：功能部件（这是从道具只是功能的阵营组件）和类组件。

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

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

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

Answer 3

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

ex。

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

Answer 4

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

Answer 5

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

); 
}; 

export default myComponent; 

而且在app.js文件只需要导入该组件为我们上课不喜欢

import myComponent from './myComponent.js' 

，并呼吁为

<myComponent /> 

这将肯定工作。