web-dev-qa-db-ja.com

矢印関数は割り当てを返しませんか？

私のコードはアプリで正しく機能していますが、私のエスリントはそれを好みませんし、割り当てを返すべきではないと言っています。これの何が問題になっていますか？

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

修正：

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

説明：

現在のコードは次と同等です：

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

This.myCustomEl = elの結果を返しています。コードでは、これは実際には問題ではありませんが、たとえば、コンパレータ（==または===）の代わりに誤って割り当て（=）を使用すると、プログラミングで最もイライラするバグの1つが発生します。

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

上記の場合、コンパイラ警告はk=trueはtrueと評価されます（k===true、これはおそらくあなたが入力しようとしたものであり、意図しない動作を引き起こします。したがって、eshintは、割り当てを返すときに通知し、比較を返すことを意図していると想定し、注意する必要があることを知らせます。

あなたの場合、結果を返さないだけでこれを解決できます。これは、括弧{}を追加し、returnステートメントを追加しないことで実行できます。

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

次のようにeshint警告を調整することもできます。 https://eslint.org/docs/rules/no-return-assign

31
Aidan Hoolachan

暗黙的に割り当てを返しています。 this.myCustomEl = elは割り当てです。このリンティングエラーは、矢印関数を(el) => { this.myCustomEl =el }ではなく{}でラップしたために暗黙的に返されない()に変更することで修正できます。

サイドノート：レンダリングメソッド内で矢印関数をインラインで宣言すると、コンポーネントがレンダリングするたびに新しい匿名関数を宣言する必要があるため、PureComponentが壊れます。 PureComponent dosはこれにより壊れており、常に再レンダリングされます。

それをコンポーネントのメソッドにしてみてください。

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

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

上記の構文が機能しない場合は、次を使用できます。

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