在 React ant 设计中应用类型

本文介绍了在 React ant 设计中应用类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用来自 antd 设计的表格.而且，我想输入在 Table 组件中作为参数传递的 onChange 函数.

I am using Table from antd design. And, I want to type onChange function that is passed as param in Table component.

const change = (
  pagination: TablePaginationConfig,
  filters: Record<string, Key[] | null>,
  sorter: SorterResult<RecordType> | SorterResult<RecordType>[]
) => {};

ReactDOM.render(
  <Table onChange={change} columns={columns} dataSource={data} />,
  document.getElementById("container")
);

问题是我无法导入RecordType.如何在不使用 any 的情况下正确键入此代码?这是一个演示.

The issue is that I can't import RecordType. How to type properly this code without using any? Here is a demo.

推荐答案

你不必显式声明 change 的类型，SorterResult 的泛型是数据源项的类型，可以通过两种方式隐式声明change的类型.

You don't have to declare the type of change explicitly, the generics of SorterResult is the type of dataSource item, and you can declare the type of change implicitly in two ways.

1.将泛型传递给表格元素

type TDataItem = {
  key1: number;
  key2: string;
}

<Table<TDataItem> onChange={()=>{}} columns={columns} dataSource={[]} />,

2.将泛型传递给列:

import { ColumnProps } from 'antd/lib/table';

...

type TDataItem = {
  key1: number;
  key2: string;
}

...

const columns: ColumnProps<TDataItem>[] = [

<Table onChange={()=>{}} columns={columns} dataSource={[]} />,

这篇关于在 React ant 设计中应用类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！