表数据和列类型（react-table v8）

Question

我对打字稿相当陌生，我正在使用并围绕钩子@tanstack/react-table构建一个，它需要 2 个道具并将它们传递给钩子。TableComponentuseReactTabledatacolumnsuseReactTable

问题是 data 和 columns 属性是可以包含不同类型对象的数组，并且它们是连接的，我如何正确输入它们？现在我在里面遇到错误TableComponent

type OrderTableProps = {
  data: OrdersRow[];
  columns: typeof ordersTableColumns;
  onRowClick?: (row: Row<OrdersRow>) => void;
}

type ContainerTableProps = {
  data: ContainersRow[];
  columns: typeof containersTableColumns;
  onRowClick?: (row: Row<ContainersRow>) => void;
}

export type TableComponentProps = PropsWithChildren
  & TableComponentBaseProps
  & (OrderTableProps | ContainerTableProps);
    

// TableComponent
    const ReactTableComponent = ({data, columns}: TableComponentProps) => {
     const table = useReactTable({
        data, -> Type 'OrdersRow[] | ContainersRow[]' is not assignable to type 'OrdersRow[]'
        columns,
        getCoreRowModel: getCoreRowModel(),
      });
    
      return (
        <Table> ... </Table>

}

Answer 1

您需要的是具有通用类型的 Table 组件。我们开始做吧。

例如，表组件名称为ReactTable。首先，我们定义接口，以便我们的表可以接收提供的任何数据和列。

import {
  ColumnDef,
  useReactTable,
  ...
} from "@tanstack/react-table";

interface ReactTableProps<TData> {
  data: TData[];
  columns: ColumnDef<TData>[];
}

const ReactTable = <TData extends object>({
  data,
  columns,
}: ReactTableProps<TData>) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    ...
  )
}

然后，我们可以按如下方式实现我们的表：

  return (
    <div className="App">
      <ReactTable data={orders} columns={orderColumns} />
      <ReactTable data={containers} columns={containerColumns} />
    </div>
  );

如果你想更严格，你可以实现如下类型：

  return (
    <div className="App">
      <ReactTable<Order> data={orders} columns={orderColumns} />
      <ReactTable<Container> data={containers} columns={containerColumns} />
    </div>
  );

您可以在这里查看完整的代码：