web-dev-qa-db-fra.com

La fonction de flèche ne devrait pas retourner l'assignation?

Mon code fonctionne correctement dans l'application, cependant, mon eslint ne l'aime pas et dit que je ne devrais pas retourner d'attribution. Quel est le probleme avec ca?

<div ref={(el) => this.myCustomEl = el} />
javascriptreactjseslint
18
AnnaSm

Le correctif: 

<div ref={(el) => { this.myCustomEl = el }} />

L'explication:

Votre code actuel est équivalent à:

<div ref={(el) => { return this.myCustomEl = el }} />

Vous retournez le résultat de this.myCustomEl = el. Dans votre code, ce n'est pas vraiment un problème - cependant, l'un des bugs les plus frustrants de la programmation se produit lorsque vous utilisez accidentellement une affectation (=) au lieu d'un comparateur (== ou ===), par exemple:

let k=false;  
if(k=true){
  thisWillExecute();
}

Dans le cas ci-dessus, l’avertissement du compilateur est logique car k=true est évalué à true (par opposition à k===true, ce qui est probablement ce que vous vouliez taper) et provoque un comportement inattendu. Ainsi, eshint vous avertit lorsque vous retournez une affectation, suppose que vous vouliez renvoyer une comparaison et vous indique que vous devez être prudent.

Dans votre cas, vous pouvez résoudre ce problème simplement en ne renvoyant pas le résultat, ce qui consiste à ajouter des crochets {} et aucune instruction return:

<div ref={(el) => { this.myCustomEl = el }} />

Vous pouvez également régler l’avertissement eshint comme suit: https://eslint.org/docs/rules/no-return-assign

31
Aidan Hoolachan

Vous retournez implicitement une mission. this.myCustomEl = el est une mission. Vous pouvez corriger cette erreur en changeant votre fonction de flèche en (el) => { this.myCustomEl =el } qui ne retourne plus implicitement parce que vous l'avez enveloppé dans {} au lieu de ().

Note latérale: Déclarer une fonction de flèche en ligne dans une méthode de rendu cassera un PureComponent car chaque fois que votre composant le restitue, il doit déclarer une nouvelle fonction anonyme, de sorte que la comparaison des accessoires peu profonds PureComponentdo est cassé par cela et sera toujours rendu à nouveau.

Essayez d’en faire une méthode de votre composant.

class MyClass extends React.PureComponent {
    getRef = (el) => { this.ref = el; }

    render() {
        return <div ref={this.getRef} />;
    }
}

Si la syntaxe ci-dessus ne fonctionne pas pour vous, vous pouvez utiliser les éléments suivants:

class MyClass extends React.PureComponent {
    constructor(props) {
        super(props);

        this.ref = null;

        this.getRef = this.getRef.bind(this);
    }

    getRef(el) {
        this.ref = el;
    }

    render() {
        return <div ref={this.getRef} />;
    }
}
3
Kyle Richardson