import "./App.css";
import React, { useEffect, useRef } from "react";
import RefToGetChild from "./components/RefToGetChild";
import _ from 'lodash';
const App: React.FC = () => {
  const childRef = useRef<any>(null);
  useEffect(() => {
    console.log(_.get(childRef, 'current'));
  }, [_.get(childRef, 'current')]);
  return (
    <div>
      <RefToGetChild ref={childRef} message={"子組件: say hello"} />
      <button onClick={() => {
        const child = _.get(childRef, 'current');
        const buttonDom = child.buttonRef.current
        buttonDom?.click();
      }}>父組件: trigger child button</button>
      <button onClick={() => {
        const child = _.get(childRef, 'current');
        child?.onTest();
      }}>父組件: 使用子組件的onTest方法</button>
      <div>父組件: 子組件的data {JSON.stringify(_.get(childRef, 'current.data'))}</div>
    </div>
  );
};
export default App;

import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";
const RefToGetChild = forwardRef((props:{message:string;}, ref) => {
  const [data, setData] = useState({});
  const buttonRef = useRef(null);
  useEffect(() => {
    setTimeout(() => {
      const obj = {
        a: 1,
        b: 2,
        c: 3,
        d: Array.from({ length: 10 }, (_, i) => ({ id: i })),
      };
      setData(obj);
    }, 1000);
  }, []);
  const sayHello = () => {
    console.log("hello");
  };
  const onTest = () => {
    console.log('test')
  }
  useImperativeHandle(ref, () => ({
    data,
    buttonRef,
    onTest,
  }));
  return (
    <div>
      <button ref={buttonRef} onClick={sayHello}>
        {props.message}
      </button>
    </div>
  );
});
export default RefToGetChild