reactjs - Babel を使用して ES6(7?) で .bind を回避する

Question

私は私のJSXにこれを持っています:

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} />

.bindしかし、コールバック メソッドを子 React コンポーネントに渡す際に、その必要性を否定するという空想を見たことがあると断言できます。

Answer 1

プロパティの初期化と組み合わせてアロー関数を使用できます。

class Component extends React.Component {
  handleClick = () => {
    console.log(this.props);
  }

  render() {
    return <div onClick={this.handleClick} />
  }
}

アロー関数はコンストラクターのスコープで宣言され、アロー関数はthisその宣言スコープから維持されるため、すべて機能します。ここでの欠点は、これらがプロトタイプの関数ではなく、各コンポーネントですべて再作成されることです。ただし、bind結果は同じであるため、これは大きな欠点ではありません。