Код таблицы сортировки Ant design не работает с машинным кодом реакции

Question

Я использовал следующий код таблицы сортировки ant design в скрипте типа реакции, он не работает правильно, кто-нибудь знает, как это сделать правильно

Мой код здесь

     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*/
        );
    }
}

Answer 1

Объявляя переменную в машинописном тексте, вы должны указать ее как columns: any = [] и data: any = [] ..

А при создании table вы должны задать реквизиты как

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

Рабочий образец и таблица с машинописным текстом здесь ...