親コンポーネントから子コンポーネントの関数を実行したい

子コンポーネント

子コンポーネント自体を forwardRef() に渡し、親コンポーネントのref.current を通じて子コンポーネントの ref にアクセスすることができるようにする。

import { forwardRef } from 'react';

const VideoPlayer: React.FC<Props> = (props, ref) => {

・・・

}

export default forwardRef(VideoPlayer);

子コンポーネントの第二引数でrefを受けとっておく。

forwardRef
ref を配下のツリーの別のコンポーネントに受け渡す React コンポーネントを作成する。

useImperativeHandleを使って親コンポーネントに渡せる関数を定義する。

import { useImperativeHandle } from 'react';

const VideoPlayer: React.FC<Props> = (props, red) => {

・・・

  useImperativeHandle(ref, () => {
    return {
      pause: () => onPressPause();
    }
  });

・・・

}

useImperativeHandleの第一引数でrefを受け取り、第二引数に参照できる関数を返却する即時関数を渡す。

useImperativeHandle
ref が使われた時に親コンポーネントに渡されるインスタンス値をカスタマイズする。
forwardRef と組み合わせて使う。

親コンポーネント

import React, { useRef } from 'react';

const videoPlayer = useRef<any>(null);

const Detail: React.FC<Props> = (props) => {
    
  <VideoPlayer
    ref={videoPlayer}
  />
}

子コンポーネントのプロパティにrefを追加し、ref オブジェクトを格納する変数を渡す。

refオブジェクトのcurrent配下にuseImperativeHandleで定義した関数があるので下記のように子コンポーネントのメソッドを呼び出せる。