Reactで子コンポーネントの関数を親コンポーネント内で実行したい。

Question

Reactで子コンポーネントの関数を親コンポーネント内で実行したい。

・子コンポーネントでshowAlertを定義
・親コンポーネントの特定buttonに紐付けたイベント内でshowAlertを実行

前提

refとforwardRef 、 useImperativeHandleを使用して実装を試みましたが、下記のエラーが出てしまいます。
showAlert関数は、実際のコードでは子コンポーネント内フォームに入力された値を使用する計算関数です。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of null (reading 'showAlert')

該当のソースコード

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

const childComponent = forwardRef((ref) => {
const handleShow = () => {
   showAlert()
};

  useImperativeHandle(
        ref,
        () => ({
            showAlert() {
                alert("hoge")
            }
        }),
    )
retrun(
<Button
     className="btn btn-primary px-3"
     onClick={handleShow}
 >
 </Button>
)
});


const parentComponent = () => {
const childFunc = useRef(null);
const handleClick= () => {
childFunc.current.calculate();
}
return(
<MyChildComponent
    ref={childRef}
/>
                    <Button
                        onClick={handleClick}
                    >
                    </Button>
)
};
export default parentComponent;

試したこと

const childFunc = useRef(null);
↓
const childFunc = useRef();

などを試しましたが、undefinedに変わるだけでした。

Comments

[maisumakun]

本当に実行したコードのとおりですか？

const childComponent = forwardRef(ref) => {の部分が文法的に成立してないようにも見えます。

[mog]

すみません、こちら正しい文に修正いたしました。

Answer 1

子コンポーネントからのイベントを親コンポーネントに伝播させるにはコールバック関数を用いる方法が手っ取り早いです。

【React】子コンポーネントから親コンポーネントへの値受け渡し

あとはイベントの中身を整理してください。

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

const childComponent = forwardRef((ref) => {
const handleShow = () => {
   showAlert()
};

  useImperativeHandle(
        ref,
        () => ({
            showAlert() {
                alert("hoge")
            }
        }),
    )
retrun(
<Button
     className="btn btn-primary px-3"
     onClick={()=>handleShowState}
 >
 </Button>
)
});


const parentComponent = () => {
const childFunc = useRef(null);
const handleClick= () => {
 //省略
}
return(
 {/*handleShowStateは子コンポーネントからのイベント*/}
<MyChildComponent
     handleShowState={()=>handleClick()}
/>
           
)
};
export default parentComponent;