カスタムコンポーネントに渡された ref は、その内部の DOM ノードへ自動的には届きません。forwardRef は、コンポーネントが ref を受け取り、それを子要素に取り付けられるようにします。useImperativeHandle は、その ref が何を公開するかをカスタマイズします。
ref を DOM ノードに転送する
jsx
= ( () {
;
});
ref = ();
;
DOM ノード全体を漏らしたくなく、特定のメソッドだけを公開したい場合があります：
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
コミュニケーションには props/state を優先しましょう。ref に手を伸ばすのは、本当に命令的な必要があるときだけです：フォーカス管理、スクロール、テキスト選択、メディア再生、または命令的なライブラリの統合。注意：React 19 では ref を通常の prop として渡せるため、forwardRef はもはや不要な場合が多くなっています。