Help us understand the problem. What is going on with this article?

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

前提

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 = () => {
    ref.current.fire(); //refオブジェクトからfire()を実行
  }

  return (
    <Child ref={ref}> // refオブジェクトをそのまま渡す
  )
}

子コンポーネント

import React, { FC, useImperativeHandle } from 'react';

interface Props {
  ref: RefObject<void>;
}

const Child: FC<Props> = ({
  ref
}) => {

  useImperativeHandle(ref, () => ({
    fire() {
      // 発火させたい処理
    }
  }));

  // ...(省略)...
}

useImperativeHandleの使い方は下記の通り。

useImperativeHandle(ref, createHandle, [deps])

参考

https://ja.reactjs.org/docs/hooks-reference.html

shogotgm
型安全なフロントエンジニア
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away