TypeScript で React で forwardRef を使用する

1. React の refs とは
2. React で forwardRef が必要な理由
3. React と TypeScript の forwardRef
4. TypeScript で forwardRef を使用する

近年、React と TypeScript を併用する開発者が増えています。 職務記述書は、React で TypeScript を使用することが一時的な流行ではなく、現在および将来であることをさらに確認できます。

Web 開発者は、コードをより整理し、エラーの余地を減らし、デバッグの時間を節約するために TypeScript を書くことを好みます。

この記事では、子コンポーネントから親への参照の転送について説明します。

React の refs とは

通常、DOM React 要素の外観は、state または props オブジェクトの変更に応じて変更されます。 ただし、React では、特定の DOM 要素をキャプチャし、必要に応じて強制的に変更することができます。

React の Ref (参照の略) を使用すると、開発者は DOM 要素にアクセスして操作できます。

React 16.8 以降、React 開発者はフック useRef を使用してフックを作成できます。 ここに例があります。

function App() {
  let inputRef = useRef();
  return (
    <div className>
        <input ref={inputRef} type="text" />
    </div>
  );
}

ここでは、変数 inputRef を作成し、ref として初期化します。

次に、JSX で <input> 要素を見つけ、その ref 属性を前に作成した変数に設定します。 これで、この要素への参照が変数に格納されます。

参照は、DOM 要素を直接アニメーション化するためによく使用されます。 これらは通常、要素がフォーカスまたは選択されたとき、またはアニメーションを強制的にトリガーしたときに境界線を強調表示します。

React で forwardRef が必要な理由

通常、参照を作成した同じコンポーネント内の参照にアクセスします。

ただし、親コンポーネントの DOM 要素の 1つに ref を定義し、それを子コンポーネントに渡す必要がある場合があります。 そのため、forwardRef 機能が必要です。

React と TypeScript の forwardRef

親コンポーネントの子コンポーネントから要素にアクセスする必要がある場合があります。 たとえば、<div> 要素を含む <Message> コンポーネントがあり、親の <Messenger> コンポーネントからアクセスしたいとします。

function Message({messageText}) {
    return <div>{messageText}</div>;
}

ボックスにフォーカスがあるときにボックスを強調表示したい場合があります。 これを行う唯一の方法は、親コンポーネントで ref を作成することです。 次に、要素がフォーカスされているかどうかを確認し、条件付きで強調表示できます。

function App() {
  const input = React.useRef<HTMLElement>(null);

  React.useEffect(() => {
    if (input.current) {
      input.current.focus();
    }
  }, []);

  return <Message messageText="hello world" ref={input} />;
}

ただし、親コンポーネントは子コンポーネントに含まれる HTML 要素に直接アクセスできないため、これはエラーをスローします。 代わりに、forwardRef を使用します。

子コンポーネントを定義するときは、次の変更を行う必要があります。

const Message = React.forwardRef((props, ref) => {
    return <div ref={ref}>{props.messageText}</div>;
});

React の forwardRef 関数は、<div> 要素を親で利用できるようにします。 コンポーネント全体を forwardRef 関数でラップします。

Message 変数に格納できるコンポーネントを返します。

今回は、親コンポーネントが子の要素にアクセスします。

TypeScript で forwardRef を使用する

前の例では、ref インスタンスを作成して input 変数に保存するときに、そのタイプを指定します - <HTMLElement>。

function App() {
  const input = React.useRef<HTMLElement>(null);
	...
  return <Message messageText="hello world" ref={input} />;
}

<HTMLElement> は、React における DOM 要素の最も一般的なタイプです。 <div> 要素を参照している場合は、<HTMLDivElement> のようなより具体的なタイプを使用できます。