Ant 设计排序表代码不适用于反应打字稿答案

【问题标题】：Ant design sort table code not working on the react typescriptAnt 设计排序表代码不适用于反应打字稿
【发布时间】：2020-05-27 21:33:06
【问题描述】：

我在反应类型脚本中使用了以下 ant design sort table code，它无法正常工作，任何人都知道如何正确地做到这一点

我的代码在这里

     import { Table } from 'antd';
  import * as React from 'react';

import { Table } from 'antd';
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        filters: [
            {
                text: 'Joe',
                value: 'Joe',
            },
            {
                text: 'Jim',
                value: 'Jim',
            },
            {
                text: 'Submenu',
                value: 'Submenu',
                children: [
                    {
                        text: 'Green',
                        value: 'Green',
                    },
                    {
                        text: 'Black',
                        value: 'Black',
                    },
                ],
            },
        ],
        // specify the condition of filtering result
        // here is that finding the name started with `value`
        onFilter: (value:any, record:any) => record.name.indexOf(value) === 0,
        sorter: (a:any, b:any) => a.name.length - b.name.length,
        sortDirections: ['descend'],
    },
    {
        title: 'Age',
        dataIndex: 'age',
        defaultSortOrder: 'descend',
        sorter: (a:any, b:any) => a.age - b.age,
    },
    {
        title: 'Address',
        dataIndex: 'address',
        filters: [
            {
                text: 'London',
                value: 'London',
            },
            {
                text: 'New York',
                value: 'New York',
            },
        ],
        filterMultiple: false,
        onFilter: (value:any, record:any) => record.address.indexOf(value) === 0,
        sorter: (a:any, b:any) => a.address.length - b.address.length,
        sortDirections: ['descend', 'ascend'],
    },
];

const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Jim Red',
        age: 32,
        address: 'London No. 2 Lake Park',
    },
];
function onChange(pagination:any, filters:any, sorter:any, extra:any) {
    console.log('params', pagination, filters, sorter, extra);
}
//Table sample data
export class Customertable extends React.Component {


    render() {
        return (

            /* Start Search button*/
            <div className="customertable-section">
                <div>
                    <Table columns={columns} dataSource={data} onChange={onChange} />

                </div>


            </div>
            /* End of  Search button*/
        );
    }
}

【问题讨论】：

标签： reactjs typescript antd

【解决方案1】：

在 typescript 中声明变量时，您需要将其命名为 columns: any = [] 和 data: any = []..

在制作 table 时，您应该提供类似的道具，

<Table columns={this.columns} dataSource={this.data} />

Working sample antd table with typescript here...

【讨论】：

Column Config 没有静态类型吗？
使用any 是一种技巧，而不是解决方案。

【解决方案2】：

为了补充 Maniraj 的评论，文档提供了 Typescript 特定用法的部分： https://ant.design/components/table/#Using-in-TypeScript

可以通过从'antd/es/table' 导入ColumnsType 来设置columns 的类型

【讨论】：