TypeScript + React FCでのforwardRefの書き方

やりたい事

Reactの関数コンポーネントにrefを渡してあげたい。

やり方

こういうpropsから受けとったタイトルを表示するコンポーネントがあるとします。

import React, {forwardRef} from 'react';

const Title = ({title}) => {
  return (
    <div>
      <h2>{title}</h2>
    </div>
  );
};

export default Title

こちらのコンポーネントをforwardRef関数で囲います。

import React from 'react';

const Title = forwardRef(({ title }, ref) => {
  return (
    <div>
      <h2 ref={ref}>{title}</h2>
    </div>
  )
});

export default Title

後は型情報を渡してあげたら完成です。 forwaredRef<Refの型, Propsの型> という形式で渡してあげましょう。今回の場合はh2にrefを渡しているのでHTMLHEADINGElementを指定しています。

import React, { forwardRef } from 'react';

type Props = {
  title: string
}

const Title = forwardRef<HTMLHeadingElement, Props>(({ title }, ref) => {
  return (
    <div>
      <h2 ref={ref}>{title}</h2>
    </div>
  )
});

export default Title

最後に実際にrefが渡せているのか確認してみましょう。

import React, { useRef } from 'react';
import Title from "~/components/Title"

const Main = () => {
  const ref = useRef(null)
  console.log(ref)

  return (
    <div>
      <Title title='タイトルだよー' ref={headingRef} />
    </div>
  );
};

export default Main;

コンソールを確認するとTitleコンポーネント内のh2要素が取得出来ているのが確認できると思います。

参考した記事