"ほとんどのレガシー" ref文字列属性の代わりに？

Question

私はdocs about refsに反応更新を読んだとき、私は少し驚きました。 Reactフロントページの例はまだthis.refs.textareaを使用していますが、後でこのアプローチを使用しないように「推奨」します。

しかし、代替手段は何ですか？私はそれを再利用することができるの間違った印象を与える方法を構築することが必要です（() =>がthisにコンテキストを失わないように必要です）{() => this.initChartLibrary() }のように、混乱し、代わりに関数を呼び出すことが長すぎるインラインコードを見つけます。

は、言い換えれば、私はまだ文字列の方法を使用したいと思います。しかし、私は彼らがそれを非難することを恐れるので、私は他のアプローチがあれば、私は疑問に思っていた？

Answer 1

は、私の知る限り承知しているようref文字列への主な代替は、実際にES6スタイルのコールバック関数です。

ので：リアクトでref属性が自動的にパラメータとして参照されているコンポーネントを受け取るので、これはかなり強力です

<textarea ref={ (ref) => this.myTextArea = ref }> 
... 
</textarea> 

// Where refs are then accessed by `this.myTextArea` 

、私たちを可能にする：

<textarea ref="myTextArea"> 
... 
</textarea> 

// Where refs are then accessed by `this.refs.myTextArea` to perform any operations 

は、基本的な形でとなり、必要に応じてすぐにコールバック操作を実装することができます。これはthis.myTextAreaにその参照を割り当てるために、上記のように、簡単な形態で使用することができる、またはあなたはおそらくドキュメントに気づいたとして、あなたはもう少し直接的なものと同じようなことを行うことができます。

<input 
    ref = {(input) => 
      { if (input != null) {input.focus()} } 
    } /> 

これは時には、あなたが最低限の行数でコードを表現できることを意味しますが、可読性を犠牲にすることは間違いありません。 ref文字列を使用して、イベントハンドラで使用するためのコンポーネントへの参照を保存する場合（非常に一般的ですが）、正にまだ最もクリーンな方法です。彼らはにはかなり頻繁に使用されているように私は本当に&反応し、警告なしに廃止されるためにそれらを予想していないでしょう

は便利なままですが、彼らはこれまでであれば、あなたの最善の策は、単純な(ref) => this.myRef = refは、あなたの参照文献にアクセスすると、簡単リファクタリングだろうthis.myRef。