React+Ts实现二次封装组件

import type { PaginationProps } from 'antd'
import { Table } from 'antd'
import type { TableProps } from 'antd/es/table'
import {
  FilterValue,
  RowSelectMethod,
  SorterResult,
  TableCurrentDataSource,
  TablePaginationConfig,
  TableRowSelection,
} from 'antd/es/table/interface'
import { ForwardedRef, forwardRef, Key, useCallback, useImperativeHandle, useMemo, useState } from 'react'
import styles from './index.less'

// 处理forwardRef使其可以接受泛型
declare module 'react' {
  // eslint-disable-next-line @typescript-eslint/ban-types
  function forwardRef<T, P = {}>(
    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null
}

export type onChangeType<RecordType> = (
  pagination: TablePaginationConfig,
  filters: Record<string, FilterValue | null>,
  sorter: SorterResult<RecordType> | SorterResult<RecordType>[],
  extra: TableCurrentDataSource<RecordType>
) => void

export type onSelectChangeType<T> = (
  selectedRowKeys: Key[],
  selectedRows: T[],
  info: {
    type: RowSelectMethod
  }
) => void

interface TProps<T> extends React.PropsWithChildren<TableProps<T>> {
  tableData?: pagingResProps<T> // 总数据
  tableOnChange?: onChangeType<T> // 变化回调
  tableRowSelection?: TableRowSelection<T> // 自定义行数据设置
  tablePagination?: TablePaginationConfig //自定义分页配置
  bottomTitleFlag?: boolean // 左下页角信息是否显示
}

// table ref的参数
export interface TableDefaultRefProps<T> {
  selectedRowKeys: Key[]
  selectedRowRows: T[]
}

const _TableDefault = <T extends object>(props: TProps<T>, ref: ForwardedRef<TableDefaultRefProps<T>>) => {
  return <div>table</div>
}

const TableDefault = forwardRef(_TableDefault)
export default TableDefault

const _TableDefault = <T extends object>(props: TProps<T>, ref: ForwardedRef<TableDefaultRefProps<T>>) => {
  const { tableData, tableOnChange, tableRowSelection, tablePagination, bottomTitleFlag = false, ...otherProps } = props

  // 当前选择的key和行
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([])
  const [selectedRowRows, setSelectedRowRows] = useState<T[]>([])

  // 左右分页样式处理
  const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
    if (type === 'prev') {
      return <a style={{ color: '#CCF2FF', fontSize: '14px' }}>上一页</a>
    }
    if (type === 'next') {
      return <a style={{ color: '#CCF2FF', fontSize: '14px' }}>下一页</a>
    }
    return originalElement
  }

  const handelChange: onChangeType<T> = useCallback((pagination, filters, sorter, extra) => {
    // 想要做的拦截操作
    props.tableOnChange?.(pagination, filters, sorter, extra)
  }, [])

  // 选择多选框回调
  const onSelectChange: onSelectChangeType<T> = (selectedRowKeys, selectedRows, info) => {
    setSelectedRowKeys(selectedRowKeys)
    setSelectedRowRows(selectedRows)
  }

  // ref抛出变量
  useImperativeHandle(ref, () => ({
    selectedRowKeys,
    selectedRowRows,
  }))
  // 开始页码
  const startCode = useMemo(
    () => () => {
      if (!tableData || !tableData?.current) return 1
      return (tableData?.current - 1) * tableData?.size + 1
    },
    [tableData]
  )
  // 结束页码
  const endCode = useMemo(
    () => () => {
      if (!tableData) return 99
      return Math.min(tableData?.total, tableData?.current * tableData?.size)
    },
    [tableData]
  )
  return (
    <div
      className={styles.tableDefault}
      id="tableDefault"
    >
      <Table
        rowKey="id"
        dataSource={tableData?.records}
        pagination={{
          itemRender,
          total: tableData?.total,
          showSizeChanger: false,
          pageSize: tableData?.size,
          current: tableData?.current,
          ...tablePagination,
        }}
        onChange={handelChange}
        rowSelection={{
          type: 'checkbox',
          fixed: false,
          columnWidth: '120px',
          selectedRowKeys,
          onChange: onSelectChange,
          ...tableRowSelection,
        }}
        {...otherProps}
      />
      <div className={styles.leftIcon}></div>
      {bottomTitleFlag && (
        <div className={styles.bottomTitle}>{`显示第${startCode()}到第${endCode()}条记录，总共${
          tableData?.total
        }条记录`}</div>
      )}
    </div>
  )
}

const TableDefault = forwardRef(_TableDefault)
export default TableDefault

// 当前节点展开
  function nowNodeExpand(node: DataNode) {
    const newExpandedKeys: any[] = []
    const fn = (node: any) => {
      node[fieldNames.key] && newExpandedKeys.push(node[fieldNames.key])
      node[fieldNames.children] && node[fieldNames.children].forEach((item: DataNode) => fn(item))
    }
    fn(node)
    setExpandedKeys(uniq([...expandedKeys, ...newExpandedKeys]))
  }
  
  // ref抛出变量
  useImperativeHandle(ref, () => ({
    nowNodeExpand,
  }))