表数据和列类型(React table v8)
表数据和列类型(React table v8)
提问于 2022-08-10 06:44:43
我对打字很陌生，我正在使用@tanstack/react-table，并围绕着useReactTable钩子构建了一个TableComponent，它需要2个道具data和columns，并将它们传递给useReactTable钩子。
问题是数据和列道具是数组，可以包含不同类型的对象，并且它们是连接的，我如何正确地键入它们？现在，我在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>}
回答 1
Stack Overflow用户
发布于 2022-08-19 06:49:02
您需要的是一个具有泛型类型的表组件。那，我们做吧。
例如，表组件名为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>
);您可以在这里看到完整的代码：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73301764
复制相关文章
相似问题
腾讯云开发者
