ESLint - the component should be written as a pure function (respond to preference / stateless function)

Question

ESLint gives me this error in a response project.

ESLint - The component should be written as a pure function (response preferred / stateless function)

It points to the first line of the component.

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

      //stuff here

    );
  }
}

How to get rid of this error?

Answer 1

Two options

Temporarily disable the warning

^{(Not verified, and there are several ways to do this.)}

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

Use a clean, stateless component

The return value is what will be displayed (for example, you basically write a rendercomponent method based on a class:

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

( -ES6, .)

,

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>

, . ESLint PropTypes ; , static 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

() :

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

Answer 5

, , jsx-, constructor(props), , class .

.

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

Answer 6

, . , lint .

Answer 7

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

  );
};

export default myComponent;

app.js , ,

import myComponent from './myComponent.js'

<myComponent />

.

Answer 8

export class myComponent extends PureComponent {
  ...
}