Reactの関数コンポーネントで親コンポーネントから子コンポーネントの関数を実行する

● Reactの関数コンポーネントで親コンポーネントから子コンポーネントの関数を実行する

forwardRef , useImperativeHandle を使います

import React, { useImperativeHandle, forwardRef, useRef } from "react";

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

useImperativeHandle は forwardRef と組み合わせて使います。
useImperativeHandle は コンポーネントにメソッドを生やす Hooks です

● 子コンポーネントで関数 showAlert() を登録

1. メソッドの追加

import { useImperativeHandle, forwardRef } from "react";
    useImperativeHandle(
        ref,
        () => ({
            showAlert() {
                alert("Child Function Called")
            }
        }),
    )

2. refを受け取れるようにする

const MyChildComponent = (props) => {

      ↓

const MyChildComponent = (props, ref) => {
export default MyParentComponent;

      ↓

export default forwardRef(MyParentComponent);

● 親コンポーネントで ref を渡す

import { useRef } from "react";
const childRef = useRef();
<MyChildComponent
    ref={childRef}
/>

後は親コンポーネントの好きなところから関数を呼ぶことができます

<button type="button"
    onClick={ () => { childRef.current.showAlert() }}
>

関数コンポーネントはクラスとどう違うのか? — Overreacted

● useImperativeHandle を async で使用したい

子コンポーネントのuseImperativeHandle を次のようにします。

    useImperativeHandle(
        ref,
        () => (
            {
                showAlert:  async function(){ await showAlert(); } ,
            }
        )
    )

また showAlert() 関数にも async をつけておきます

● TypeScript で useImperativeHandle を使用する例

ForwardRefRenderFunction を使います

import React, { useImperativeHandle, forwardRef } from "react";

interface Props {
  text: string;
}

interface Handler {
  showAlert(): void;
}

const ChildBase: React.ForwardRefRenderFunction<Handler, Props> = (
  props,
  ref
) => {
  // 公開する関数
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert(props.text);
    },
  }));

  return <span>{props.text}</span>;
};

const VFCChild = forwardRef(ChildBase);
export default VFCChild;
No.2093
03/10 12:11

edit