react组件设计方法，子父组件传值

父：

import React, { useEffect, useRef } from "react";
import Progress, { ProgressRef } from "./Progress";

const Demo = () => {
  const progressRef = useRef<ProgressRef>(null);
  useEffect(() => {
    const res = progressRef?.current?.getApi().getFormData();
    console.log("🚀 ~ useEffect ~ res:", res);
  }, []);
  return (
    <div>
      <Progress ref={progressRef} XbsType="你好，世界"></Progress>
    </div>
  );
};

export default Demo;

子：

import { forwardRef, useImperativeHandle, useRef } from "react";
// 组件接口定义
interface ProgressProps {
  XbsType?: string; // Xbs类型 'WBS' 'MBS'
  formId?: any; //formId
  // page?: any; // 页面实例
}
export interface ProgressRef {
  // 对外暴露的方法
  getApi: () => {
    getFormData: () => void; // 获取查询条件
  };
  // 对外暴露的属性
  getStatus: () => {
    queryParams: any; // 查询条件
  };
}
const Progress = (
  { XbsType = "WBS", formId = "searchForm" }: ProgressProps,
  ref: React.Ref<ProgressRef>
) => {
  // 获取表单数据
  const getFormData = () => {
    return XbsType;
  };
  // 暴露给父组件的属性or方法
  useImperativeHandle(ref, () => ({
    getApi: () => ({ getFormData }),
    getStatus: () => ({
      queryParams: "",
    }),
  }));
  return (
    <div>
      <h1>demo</h1>
    </div>
  );
};

export default forwardRef<ProgressRef, ProgressProps>(Progress);