親コンポーネントから子コンポーネント関数を

子コンポーネントから親コンポーネントで宣言された関数を呼び出す必要がある場合、子コンポーネントへのプロップとして渡し、子コンポーネントから呼び出します.
しかし、あなたが周りの他の方法を呼び出す場合は、物事は少しトリッキーすることができます.この記事では、親コンポーネントから子コンポーネントコンポーネント関数の呼び出し方法を参照してください.
次の例を考えます.

const ChildComp = () => {
  function showAlert() {
    alert("Hello from Child Component")
  }
  return <div></div>
}

function App() {
  return (
    <div>
      <button>Click Me</button>
      <ChildComp />
    </div>
  )
}

export default App

ここでは、警告を表示する機能を持つボタンと子コンポーネントを持つ親コンポーネントがあります.ボタンをクリックすると、showAlert関数を呼び出したい場合は、直接アクセスする方法はありません.useRefフックを使用して親コンポーネントの子コンポーネントへの参照を追加します.

import { useRef } from "react"

const ChildComp = () => {
  function showAlert() {
    alert("Hello from Child Component")
  }
  return <div></div>
}

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App

アプリケーションを実行している場合は、次の警告をコンソールで取得します.Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
これを修正する方法?警告自体が示唆するように、私たちは子コンポーネントを囲むためにforwardRefを使用する必要があります.

import { forwardRef, useRef } from "react"

const ChildComp = forwardRef((props, ref) => {
  function showAlert() {
    alert("Hello from Child Component")
  }
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App

子コンポーネントをforwardRefで囲む場合.
これは親コンポーネントから渡されたrefである小道具から離れた2番目のパラメータを受け取ります.
このrefの助けを借りて、親コンポーネントによってどの関数をアクセスできるかを指定できます.
これは以下のようにuseImperativeHandleフックを使用して行うことができます.

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

const ChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("Hello from Child Component")
    },
  }))
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App

useImperativeHandleフックは2つの義務的なパラメタを受け入れます.
最初はリファレンスで、2番目は初期化関数です.
最後に、ボタンのClickイベントをshowAlert関数でバインドしましょう.

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

const ChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("Hello from Child Component")
    },
  }))
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button onClick={() => childCompRef.current.showAlert()}>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App

アプリケーションを実行し、ボタンをクリックすると、警告が表示されます.

ソースコードhereを見ることができます.