Die Pfeilfunktion sollte keine Zuweisung zurückgeben?

Mein Code funktioniert in der App korrekt, mein Eslint mag ihn jedoch nicht und sagt, ich solle den Auftrag nicht zurückgeben. Was ist daran falsch?

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

Die Reparatur:

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

Die Erklärung:

Ihr aktueller Code entspricht:

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

Sie geben das Ergebnis von this.myCustomEl = el zurück. In Ihrem Code ist dies nicht wirklich ein Problem — jedoch tritt einer der frustrierendsten Fehler beim Programmieren auf, wenn Sie versehentlich eine Zuweisung (=) anstelle eines Komparators (== oder ===) verwenden, zum Beispiel:

// This function will always return **true**, surprisingly
function isEqual(a, b) {
  // The warning would be thrown here, because you probably meant to type "a===b". The below function will always return true;
  return a=b;
}

let k=false;
let j=true;

if(isEqual(k,j)){
  // You'll be very, very, very confused as to why this code is reached because you literally just set k to be false and j to be true, so they should be different, right? Right?
  thisWillExecuteUnexpectedly();
}

Im obigen Fall ist die Compiler-Warnung sinnvoll, weil k=true wird als wahr ausgewertet (im Gegensatz zu k===true, was Sie wahrscheinlich eingeben wollten) und verursacht unbeabsichtigtes Verhalten. Daher bemerkt eshint, wenn Sie eine Aufgabe zurückgeben, geht davon aus, dass Sie einen Vergleich zurückgeben wollten, und weist Sie darauf hin, dass Sie vorsichtig sein sollten.

In Ihrem Fall können Sie dies lösen, indem Sie das Ergebnis einfach nicht zurückgeben, was durch Hinzufügen von einschließenden Klammern {} und ohne Rückgabeanweisung erfolgt:

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

Sie können die Eshint-Warnung auch wie folgt anpassen:
https://eslint.org/docs/rules/no-return-assign

Sie geben implizit eine Aufgabe zurück. this.myCustomEl = el ist ein Auftrag. Sie können diesen Linting-Fehler beheben, indem Sie Ihre Pfeilfunktion auf ändern (el) => { this.myCustomEl =el } das nicht mehr implizit zurückkehrt, weil Sie es eingepackt haben {} Anstatt von ().

Randnotiz: Das Deklarieren einer Pfeilfunktion inline innerhalb einer Rendermethode wird a unterbrechen PureComponent denn jedes Mal, wenn Ihre Komponente rendert, muss sie eine neue anonyme Funktion deklarieren, also der Vergleich mit flachen Requisiten, dass a PureComponent tut, ist dadurch kaputt und wird immer neu gerendert.

Versuchen Sie, dies zu einer Methode Ihrer Komponente zu machen.

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

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

Wenn die obige Syntax für Sie nicht funktioniert, können Sie Folgendes verwenden:

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} />;
    }
}

Wollte nur etwas anmerken, auf das ich gestoßen bin. Ich habe Prettier installiert und es hat immer wieder meine Eltern entfernt, was zu einem Eslint-Fehler führte: Um dies zu bestätigen, habe ich ein hübscheres Ignorieren hinzugefügt:

    <div>
        {/*prettier-ignore*/}
        <Map
            ref={(m) => {
                this.leafletMap = m;
            }}
            center={mapCenter}
            zoom={zoomLevel}
        >
            <TileLayer
                attribution={stamenTonerAttr}
                url={stamenTonerTiles}
            />
        </Map>
    </div>