みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20210416093201p:plain

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

ja.reactjs.org
ja.reactjs.org

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>
  );
}

こんな感じで叩くことができます。