web-dev-qa-db-fra.com

Hélice déstructurée à l'intérieur de l'état de réaction

J'ai ajouté la configuration airbnb pour eslint qui encourage la déstructuration des accessoires et des états, j'aime bien, mais je suis tombé sur un problème lorsque je définis l'état dans mon composant

class MyComponent extends Component {
  state = {
    animation: this.props.active ? 1 : 0
  }

Je reçois une erreur

[eslint] Doit utiliser l'affectation d'accessoires destructurants (react/destructuring-assignation)

Je ne sais pas comment puis-je détruire correctement active des accessoires ici? Habituellement const {active} = this.props fonctionne, mais chaque fois que je le place dans un état ou autour, j'obtiens une erreur de syntaxe inattendue.

javascriptreactjseslint
11
Ilja

La seule chose à garder à l'intérieur de la propriété de classe est d'utiliser un getter (qui sera invoqué lors du premier rendu):

state = {
  get animation() {
    const { active } = this.props;
    return active ? 1 : 0;
  }
}

Ou vous utilisez un IIFE pour initialiser la propriété:

state = (() => {
  const { active } = this.props;
  return { animation: active ? 1 : 0 };

})()

Mais c'est en fait un peu trop compliqué. Une autre solution serait de déplacer la propriété dans le constructeur:

constructor(...args) {
 super(...args);

 const { active } = this.props;
 this.state = { animation: active ? 1 : 0 };

}

Mais personnellement, je voudrais simplement ignorer cet avertissement ici.

10
Jonas Wilms

Vous pouvez ajouter cette règle à .eslintrc.json

"rules": {
    "react/destructuring-assignment": [
      "error",
      "always",
      {
        "ignoreClassFields": true
      }
    ]
  },
2
Almaju