ES6 アロー関数は React のクラスメソッドを永続的にバインドできますか?

ES6 クラスのアロー関数をクラス メソッドとして利用する方法

最初に ES6 クラスを React に組み込むときは、インスタンスをバインドするのが一般的でした(以下の例で示すように) メソッドを明示的に使用します。ただし、重要な疑問が生じます。ES6 では、アロー関数を使用してクラス関数をクラス インスタンスに永続的にバインドし、コールバックとしての使用を簡素化することは可能ですか?

class SomeClass extends React.Component {
  // Bound method
  constructor() {
    this.handleInputChange = this.handleInputChange.bind(this);
  }
}

CoffeeScript はこの機能を提供しますが、それがどうかは不明のままです。 ES6 でも同様のことが実現できます。

class SomeClass extends React.Component {
  // Attempted arrow function binding
  handleInputChange(val) => {
    console.log('selectionMade: ', val);
  }
}

この質問は、アロー関数をクラス インスタンスに永続的にバインドできるかどうかを理解することを目的としています。 ES6 では、それらをコールバック関数として簡単に利用できるようになり、setTimeout などの関数に渡されるときに正しいコンテキストが保証されます。

解決策: 構文を修正

当初の試みはアロー関数を使用してクラス メソッドを定義すると、軽微な構文エラーが含まれます。正しい構文を以下に示します。

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

この構文では、コンパイルを成功させるために Babel 内で実験的な機能をアクティブにする必要があることに注意することが重要です。必要なプラグイン (transform-class-properties) をインストールすることで、これらの実験的な機能を有効にすることができます。

さらに、クラス フィールドと静的プロパティに関する包括的な説明は、公式提案ドキュメントで見つけることができます。

以上がES6 アロー関数は React のクラスメソッドを永続的にバインドできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。