最初に公開：https：//mingjiezhang.github.io/。
JavaScriptでは、このオブジェクトはランタイム関数ベースの実行環境（つまり、コンテキスト）にバインドされています。
Demo in Reactから始めます
Facebookが最近Reactを更新したとき、ES6のクラスがコンポーネント作成方法に追加されました。 Facebookは、Component Componentから継承されたクラスを定義することにより、コンポーネント作成の使用がコンポーネントクラスを定義することを推奨しています。公式デモ：
buttonのようなclass react.component {constructor（）; this.state = {liked：false}; this.handleclick = this.handleclick.bind（this）;} handleclick（）{this.setState（{like：！this.state.lik}）; 'liked'： 'have/' t liked '; return（<div onclick = {this.handleclick}> you {text} this。クリックしてトグルします。上記のデモには、この使用量がたくさんあります。 Button extends React.comPonentを拡張するクラスでは、これはそのコンテキストによって特異的に決定されるため、クラスを宣言するため、クラスの定義でこれの使用を知ることができません。上記の新しいクラスと同等であり、最初にconstructor（）関数を呼び出します。このコンテキストは、このコンテキストはインスタンスオブジェクトです。同様に、render（）関数でthis.state.likedのこのコンテキストもオブジェクトです。問題は、onclick = {this.handleclick}であるということです。この関数への参照を取得するのに問題はなく、ここのコンテキストがオブジェクトです。
現時点では、React.CreateClassでは、HandleClick（）がOnClickイベントがトリガーされると、Button Instanceのように自動的にバインドすることです。この時点で、この関数のコンテキストはインスタンスです。ただし、ES6クラスの執筆では、Facebookは自動バインディングをキャンセルしました。 ButtonのInstantiatingの後、HandleClick（）のコンテキストはDiv（バッキングインスタンス）のサポートインスタンスであり、Handleclick（）のコンテキストはもともとButtonのインスタンスに結び付けられています。この問題に対する複数の解決策があります。
Bind（）関数を使用して、このコンテキストを変更します
クラス宣言でconstructor（）関数を使用できます
this.handleclick = this.handleclick.bind（this）;
この方法はbind（）結合であり、複数回使用されます。この方法では、インスタンスを宣言した後、インスタンスのどこでもhandleclick（）関数を使用でき、このhandleclick（）関数のコンテキストは同様のボタンインスタンスオブジェクトです。
さらに、このコンテキストを、関数が使用されているButtonインスタンスオブジェクトにバインドすることもできます。コードは次のとおりです
<div onclick = {this.handleclick.bind（this）}> you {text} this。クリックして切り替えます。</div>この方法では、bind（）関数を使用して毎回コンポーネントオブジェクトにバインドする必要があります。
ES6の矢印関数
矢印関数=>がES6に追加されました。便利さに加えて、矢印関数には、この関数が定義されているコンテキストに結合する別の機能があります。この機能は、この問題を解決するのにも役立ちます。次のコードを使用します。
<div onclick = {（）=> this.handleclick（）}> you {text} this。クリックして切り替えます。</div>このようにして、this.handleclick（）のコンテキストは、buttonインスタンスオブジェクトにバインドされます。個人的には、矢印関数を使用すると、JavaScriptがオブジェクト指向のプログラミングスタイルに近づくと信じています。
この要約
これの本質は次のとおりです。これは、スコープとは何の関係もありませんが、実行コンテキストのみとは関係ありません。
上記は、エディターが紹介したReactでES6にこのコンポーネントを作成する方法です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！