forwardRefを使って子コンポーネントにrefを渡す 👦

forwardRefは、以前、子コンポーネントのメソッドを叩こうとしたときに使ったことがあるのですが、今回は単純にrefを渡すだけの記事です。

blog.kimizuka.org

ただ、公式ドキュメントにもわかりやすい記事があるので、そちらを見た方が早いかもしれないです。

ja.reactjs.org


ものすごく簡単に書くと、子コンポーネントがrefを受け取りたい場合はforwardRefを使います。

import { useRef } from 'react';
import Child from './Child';

const childRef = useRef(null);

export default parent() {
  return <Child ref={ childRef } />
}

親からこんな感じでrefを受け取りたかったら、

import { forwardRef } from 'react';

export default forwardRef(function Child(props, ref) {
  return <div ref={ ref } />;
});

のような感じでOKです。