react 组件通信子调用父方法并传参

场景因为react模块化开发

 如图所示，每个表格都是一个模块，先需要点击单元查看详情（modal框），但需要将解锁条件也要作为入参给后端接口，所以我决定modal写在父组件，这就需要子父通信，react 的通信方式给vue还是有所却别，特别是在hooks中，我的思路是先用interface接口传参暴漏方法，再在子组件使用interface接收。

见代码

Father

interface IProps {
  showModal?: () => void; //暴露方法
}
// 给import 一个层级

  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = (val: any) => {
    //子组件调用父组件的方法
    console.log("子组件调用父组件的方法", val);
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

<div
  className="tableContent_item tableContent_one"
  style={{ marginTop: 25 }}
>
  <ReportNormalTable
    showModal={showModal} // 父传子
    headerBgColor={"#009898"}
    headerTitle={
      subHeader.length > 0
        ? `${subHeader[0].year} ${subHeader[0].quarter}`
        : ""
    }
    data={arrList}
    headerList={arrQ2HeaderList}
    isShow={true}
  />
</div>

son

interface IProps {
  showModal?: any; // 方法
  headerBgColor?: string; // 标题背景色
  headerTitle?: string; // 标题文字
  data: any; // 数据列表
  headerList?: any; // 表头列表
  isSummary?: boolean; // 汇总行
  isShow?: boolean; // 汇总行
}

const index = (props: IProps) => {
  const renderNumberThr = (value: string | number) => {
    let val = value ? Number(value) : 0;
    return `${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };
  const onHeaderList = (arr: any, title: any, num: any) => {
    let titleHeader = "";
    titleHeader =
      title === "Month1"
        ? arr[num].name
        : title === "Month2"
        ? arr[num + 1].name
        : arr[num + 2].name;
    console.log(titleHeader);
    return titleHeader;
  };
  const month = (isShow: any, title: any) => {
    let arr = props?.headerList;
    let num = isShow ? 2 : 1;
    return onHeaderList(arr, title, num);
  };
  const onFunnel = (isShow: any, item: any, title: any, val: any) => {
    props.showModal(111);   // 子调用父方法并传参
    const leftTitle = item.region || item.bl;
    console.log(isShow, item, title);
    let titleVal =
      title !== "Funnel" && title !== "Total" ? month(isShow, title) : title;
    console.log(val, leftTitle, "--------------", titleVal, props?.headerTitle);
  };
}

效果