みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20210416093201p:plain

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(Child(props, ref) {
  return <div ref={ ref } />
}

のような感じでOKです。