Hooks(useRef) + TypeScriptで親から子コンポーネントの関数を発火する - Qiita

前提 Reactにおいて親コンポーネントから子コンポーネントを操作(DOMをさわる、関数を発火させる)のはアンチパターン。 いつもの話ですが、ref を使った手続き的なコードはほとんどの場合に避けるべきです。 by https://ja.reactjs.org/docs/hooks-reference.html#useimperativehandle refを使わずに実装するのであれば、状態を親コンポーネントに寄せるか、あるいはReduxやRecoilに頼るしかない。だけど、それでもどうしてもやりたいという場合は下記の通り。 親コンポーネント import React, { useRef } from 'react'; const Parent = () => { const ref = useRef(null); // 初期化 const hogeFunction = () => { r