BLOG ブログ

どの記事もざっくりだったのであえて書く

使用hookは forwardRef, useRef, useImperativeHandle の3種類

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

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>

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