最終更新:2025-04-07 (月) 15:52:54 (95d)  

React.forwardRef
Top / React.forwardRef

ref のフォワーディングはあるコンポーネントを通じてその子コンポーネントのひとつに ref を自動的に渡すテクニック

https://ja.reactjs.org/docs/forwarding-refs.html

基本

  • export const Hoge = forwardRef((props, ref) => {
      return <Styled {...props} ref={ref} />;
    });

メモ

  • 関数コンポーネントはデフォルトでは ref を受け取れないが、forwardRef を使うことで、関数コンポーネントでも ref を受け取れるようになる

関連