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

ES6 でクラス メソッドとしてアロー関数を使用する

ES6 クラスを使用して React アプリケーションを開発する場合、これまではメソッドを現在のオブジェクトにバインドするのが一般的でした。しかし、アロー関数を使用して、特にコールバック関数など、クラス関数をインスタンスに永続的にバインドすることはできますか?

アロー関数の構文の試行

以前は、次のような構文を使用してメソッドをバインドしていました。

class SomeClass extends React.Component {
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }
}

代わりにアロー関数を使用しようとしました:

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

結果

正しい構文

アロー関数をクラス メソッドとして使用するための構文は少し異なります。プロパティ名の後には等号が必要です:

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

実験的機能の有効化

この機能は実験的であり、コンパイルするにはtransform-class-properties Babelプラグインが必要です:

{
  "plugins": [
    "transform-class-properties"
  ]
}

次の方法でプラグインをインストールしますnpm:

npm install --save-dev babel-plugin-transform-class-properties

使用法

実験的な機能を有効にすると、コールバック関数として SomeClass.handleInputChange を渡すと、ウィンドウ オブジェクトではなくクラス インスタンスにスコープが設定されます。

詳細については、クラス フィールドと静的プロパティの提案を参照してください。

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