React Hook 親から子の関数を呼び出すやり方をちょっとだけ丁寧に書いてみる

過去にまだReactを書き始めの頃に調べたことがあったのだが、なんか皆んなざっくりとしか書いてなく、公式もざっくりだったのであえて書く

先ずは親と子を用意してます

App.js

const ChildComp = () => {
  const childFunc = () => {
    alert("hello from child comp")
  }
}

const Parent = () => {
  return (
    <>
      <button>button</button>
      <ChildComp>
    </>
  )
}

ここではまだボタンだけある親コンポーネントとアラートを出すだけの子componentがあります。
まだこの時点ではボタンを押したところで何も反応はないはずです

そこで使うのが"useRef"と"forwardRef"です
"useRef"は親に使い　"forwardRef"は子に使います

App.js

import { forwardRef, useRef } from "react"

const ChildComp = forwardRef((props, ref) => {
  const childFunc = () => {
    alert("hello from child comp")
  }
}

const Parent = () => {
  const childCompRef = useRef()
  return (
   　　<>
  　　 　　 <button>button</button>
  　　 　 　<ChildComp　ref={childCompRef}>
  　 　</>
  )
}

useRefで要素を参照できるようになるので、この場合は以下のように参照しています

  <ChildComp　ref={childCompRef}>

子コンポーネントをforwardRefで囲むと、propsとは別に2番目のパラメーターを受け取ります
さっき参照してたRefを親コンポーネントから渡してます
それを使用して、親コンポーネントからアクセスできる関数を指定できます

次は以下に示すように、子の関数に"useImperativeHandle"を使用して実行します

App.js

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

const ChildComp = forwardRef((props, ref) => {
　　　　useImperativeHandle(ref, () => ({
　　　　　　　　const childFunc = () => {
　　　　　　　　　　　　alert("hello from child comp")
	  }
  }))
}

const Parent = () => {
  const childCompRef = useRef()
  　　return (
   　　　　<>
   　　　　　　 <button>button</button>
　  　　　　　  <ChildComp　ref={childCompRef}>
 　　　　  </>
　　  )
}

"useImperativeHandle"は2つの必須パラメーターが必要で、1つ目は参照で、2つ目は初期化関数であり、childFuncを渡すことができます

最後は、ボタンに以下のようにに追加して関数をバインドしましょう!!

  <button onClick={() => childCompRef.current.childFunc()}>button</button>

これで親コンポーネントから子のコンポーネントの関数を呼び出すことができるようになったかと思います