React Hooksで子コンポーネントにメソッドを定義して親コンポーネントから叩く 🔨

コンポーネントにメソッドを定義できるuseImperativeHandle、refを別のコンポーネントに受け渡すforwardRefを使って実現します。

ChildComponent（子）

import { forwardRef, useImperativeHandle } from 'react';

export default forwardRef(function ChildComponent(props, ref) {
  useImperativeHandle(ref, () => ({
    say: () => {
      console.log('Ya-Ha-!');
    }
  });
  return <div />
}));

ParentComponent（親）

import { useEffect, useRef } from 'react';

export default function ParentComponent() {
  const childRef = useRef(null);

  useEffect(() => {
    childRef.current && childRef.current.say(); // => Ya-Ha-!
  }, [childRef]);

  return (
    <div>
      <ChildComponent ref={ childRef } />
    </div>
  );
}