组件封装

以最基础的Report组件为例

1. 定义入参 也就是props

export interface BaseReportProps<S extends BaseReportParam, T> {
  searchRender?: React.ReactNode
  actionRender?: React.ReactNode
  reportApi?: SearchApi<S, T>
  reportParams: S
  tableColumns: TableColumnsType<T>
  tableHeight?: number
  ref?: React.Ref<BaseReportRef>
  showSearchAction?: boolean
}

2. 入参传入以及默认值设置

export function BaseReport<S extends BaseReportParam, T>(props: BaseReportProps<S, T>) {
  const {
    searchRender,
    actionRender,
    reportApi,
    reportParams,
    tableColumns,
    tableHeight,
    ref,
    // 默认值设置
    showSearchAction = true,
  } = props
}

3. 暴露方法给外部调用

使用 useImperativeHandle 来暴雷方法

useImperativeHandle(ref, () => ({
  refresh: getPageData,
}))