参考資料RefについてRefとはrenderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオブジェクトです。Refオブジェクトのcurrent属性を参照することでノードにアクセスできます。Refの使いどころRefを利用するユースケースは以下のとおりです。使いすぎない』にも記述されているとおり、Refの多用は控えるようにしましょう。『データフローはPropsを介して行う』『状態はStateに保存』がReactの原則です。useRefについてuseRefとはRefオブジェクトを生成するフックです。useRef(initialValue)で初期値がinitialValueのミュータブルなRefオブジェクトを生成します。ミュータブル(mutable)なデータとは『一度作成した後も値が変更できる』性質を持つデータのことをいいます。ref={childElement}>{children}</div>;};forwardRefについて親コンポーネントから子コンポーネントのDOMにアクセスしたい、つまり親コンポーネントから子コンポーネントのRefを参照したいケースがあります。親コンポーネントで子コンポーネントのRefを参照するには子コンポーネントにref属性を追加します。子コンポーネントが関数コンポーネントの場合、関数コンポーネントにはインスタンスがないためref属性を使用できません。1forwardRefは関数コンポーネントでもref属性を使用できるようにするための機能です。コンポーネントをまたいでrefを自動的に渡すテクニックのことをrefのフォワーディングと呼びます。forwardRefは関数コンポーネントでrefのフォワーディングを実現するためのものといえます。関数コンポーネントをforwardRef()で囲む第一引数にProps、第二引数にRefを指定する参照したいDOMのref属性にRefをセットするRefを参照する場合は、useRefで生成したRefオブジェクトを当該コンポーネントのref属性に渡します。Propsの型>となります。forwardRefの具体例forwardRefの具体例として、入力フォームにフォーカスする実装を紹介します。});さいごにTwitter(@nishina555)やってます。↩RECOMMENDJavaScriptReactツイートシェアはてブ1送るPocket3プロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。