web-dev-qa-db-fra.com

ESLint - Le composant doit être écrit en tant que fonction pure (réaction reafaire / fonction sans état)

ESLint me donne cette erreur sur un projet de réaction.

ESLint - Le composant doit être écrit sous forme de fonction pure (réagit de préférence à une fonction sans état)

Il pointe vers la première ligne du composant.

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

      //stuff here

    );
  }
}

Comment puis-je me débarrasser de cette erreur?

javascriptreactjseslint
24
JakeBrown777

Deux choix.

Désactiver temporairement l'avertissement

(Non testé; et il existe plusieurs façons de le faire.)

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

tilisez un composant sans état pur

La valeur de retour correspond à ce qui sera rendu (par exemple, vous écrivez la méthode render du composant basé sur les classes:

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

(Ou utilisez une notation non ES6 si c'est ce que vous aimez.)

Pour les composants de ce type sans autre logique de prise en charge, je préfère le retour implicite, par exemple,

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

C'est une question de préférence. Je dirais que vous devriez suivre les conventions de nommage React, cependant, et conserver tous les composants en commençant par une lettre majuscule.

ESLint peut se plaindre de l'absence de parenthèse autour d'expressions JSX multilignes. Désactivez donc cette règle ou utilisez des parenthèses.

Si vous avez besoin d'accessoires, ils sont passés comme argument de la fonction:

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

export MyComponent

Et vous pouvez déstructurer le paramètre comme d’habitude pour plus de commodité:

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

Cela peut rendre le retour implicite un peu plus facile si vous utilisiez des vars locaux. Vous recevrez un avertissement ESLint sur le manque de PropTypes à moins que vous ne les déclariez; comme ce n'est pas une classe, vous ne pouvez pas simplement utiliser static propTypes dans la classe, ils doivent être attachés à la fonction (ce que beaucoup préfèrent de toute façon).

42
Dave Newton

Ecrivez votre composant en tant que fonction sans état:

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

Il existe actuellement deux styles de composants de définition dans React: les composants fonctionnels (qui ne sont que des fonctions allant des accessoires au composant React)) et des composants de classe.

La principale différence entre eux est que les composants de classe peuvent avoir state et des méthodes de cycle de vie telles que componentDidMount, componentDidUpdate, etc.

Lorsque vous n'avez pas besoin de méthodes d'état du cycle de vie, vous devez écrire votre composant sous forme de fonction sans état, car les composants sans état sont en général plus faciles à raisonner.

Pour écrire un composant fonctionnel, vous écrivez une fonction qui prend un seul argument. Cet argument recevra les accessoires du composant. Par conséquent, vous n'utilisez pas this.props pour accéder aux accessoires du composant - utilisez simplement l'argument de la fonction.

5
Pedro Castilho

Si vous comptez sur props, alors il existe un meilleur moyen (quelque peu discutable, de l'écrire à ce jour) de corriger cette erreur sans écrire de fonctions sans état - en écrivant un PureComponent et en utilisant cette commande. règle eslint [source] :

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

Avec la règle ci-dessus, l'extrait suivant est valide (puisqu'il dépend de props)

class Foo extends React.PureComponent {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

L’équipe de React prévoit de construire des optimisations autour de SFC, mais elles ne sont pas encore là. Donc, jusqu'à ce que cela se produise, SFCs n'offrira aucun avantage par rapport à PureComponents. En fait, ils seront légèrement pires car ils ne préviendront pas les enduits inutiles.

3
Mrchief

Vous n'obtiendrez cette erreur que lorsque votre classe n'aura pas de méthode de cycle de vie ni de constructeur. Pour résoudre ce problème, vous devez soit désactiver la propriété lint, soit en faire une fonction pure, soit créer un constructeur pour la classe.

1
subrat

Ajouter un constructeur () comme:

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

Si tout ce que vous faites est de rendre un modèle jsx et de ne pas déclarer l'état avec constructor(props), vous devez alors écrire votre composant en tant que fonction pure de props et ne pas utiliser le mot-clé class. Définissez-le.

ex.

export const myComponent = () => (
   // jsx goes here  
);
1
ndonolli
export class myComponent extends PureComponent {
  ...
}
0
Iryna Batvina
const myComponent = () => {
return (
  //stuff here

  );
};

export default myComponent;

Et dans le fichier app.js, importez ce composant comme nous le faisons pour une classe comme

import myComponent from './myComponent.js'

et appeler comme

<myComponent />

Cela fonctionnera à coup sûr.

0
Anil Bomma