設定されたref in arrow関数とset ref直接変数の違い

Question

Reactで何をしているのか分かります。

<Example ref={ el => {this.example = el}} /> 

が、時々私は、このアプローチを参照してください：通常私は、参考文献を設定するため、このアプローチを参照してください

<Example ref={this.example} /> 

違いは何ですか？

Answer 1

<Example ref={ el => {this.example = el}} /> 

を述べ、最後の方法についての実施例を私たちに提供してください

このメソッドでは、コールバック関数として機能します。特定のDOM要素は 'this.example'の引数として返されます。それで、あなたはあなたの必要条件を満たすDOM要素への操作を行うことができます

<Example ref={this.example} />。これは上記と同様に動作しますが、これはDOM要素にrefを付加します。 https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

Answer 2

Thetは両方とも関数です。 documentationにはthis.props.inputRefが使用されていますが、これはすべて、親コンポーネントがコールバック関数を介してそのコンポーネントへの参照を取得できることを意味します。

文字列リファレンス（非推奨）を使用していないと仮定すると、this.exampleはel => {this.example = el}と同じように機能するメンバー関数になります。

Answer 3

私の知る限りでは、要素の参照を提供するために、二つの方法があります。 <Example ref={el=>{this.example=el}}/> または <Example ref="example" />

はあなたが