[解決済み] JSX propsは.bind()を使用しないでください - bindを使用しないようにするにはどうしたらいいですか？

質問

コンテナで、フォームを表示したり、成功ページを表示したりするUIフォームを変更する必要があります。

コンテナには state.showSuccess があり、MyFormModule が状態を変更するためにコンテナを呼び出すことができるようにする必要があります。

以下のコードは動作しますが、以下の警告が表示されます。

JSXプロップは .bind()

.bind()を使わずに動作させるにはどうしたらいいですか？

...
const myPage = class extends React.Component {
  state = { showSuccess: false };
  showSuccess() {
   this.setState({
      showSuccess: true,
    });
  }
  render() {
    const { showSuccess } = this.state;
    if (showSuccess) {...}
    ....
    <MyFormModule showSuccess={this.showSuccess.bind(this)} />

解決方法は？

まず 理解する WHY これは悪い習慣です .

ここでの主な理由は .bind は新しい関数参照を返しています。
この現象は、それぞれの render を呼び出すと、パフォーマンスが低下する可能性があります。

2つの選択肢があります。

1. コンストラクタを使用して bind ハンドラ（これは 一度だけ ).

   constructor(props) {
     super(props);
     this.showSuccess = this.showSuccess.bind(this);
   }
   
   

2. また、ハンドラを作成する場合は 矢印関数 を使用するようにします。 のレキシカルコンテキストを使用します。 this そのため bind それらを をすべて( babelプラグインが必要です。 ):

   showSuccess = () => {
     this.setState({
       showSuccess: true,
     });
   }
   
   

あなたは ではなく は、このパターンを使用します（他の方のご指摘の通りです）。

showSuccess={() => this.showSuccess()}

なぜなら、これはレンダリングごとに新しい関数を作成するのと同じだからです。
そのため、警告を回避することはできても、バッドプラクティスの設計でコードを書いていることになります。

から ESLintドキュメント :

JSXプロップ内のバインドコールや矢印関数は、まったく新しい 関数がレンダリングされるたびに発生します。これはパフォーマンスにとって悪いことです。 ガベージコレクタが必要以上に呼び出されることになります。 必要です。また、新しい 関数がプロップとして渡され、そのコンポーネントが参照用の の等価性チェックを行い、更新すべきかどうかを判断します。