Javascript 如何在react组件中构建数据表？

我正在使用

react

，在检查

datatables（jquery插件）

以使用

react

时，我发现gigatables react

在文档中，它看起来很不错，屏幕截图也很酷。但在实施gigatables时

我跟着脚步走

-> npm i gigatables-react

import React，{Component}来自'React'；
从“/../account_upload/SideBar”导入侧栏；
从“gigatables react”导入{Reactables，Header}；
变量设置={
结构：{//all-in
搜索：['top']，
行选择器：['asc'，'top'，'bottom']，
分页：[“底部”]
},
requestType:'POST'，
ajax:“/domain_ip/”，
栏目：[
{数据：“id”}，
{数据：“desc”}，
{数据：“标题”}，
{数据：“日期”}，
{数据：“类型”}，
{数据：“信息”}
]
};
类帐户扩展组件{
render（）{
返回(
身份证件
描述
名称
日期
日期
信息
,
);
}
}
导出默认帐户第1步：安装jQuery和Datatables节点模块
npm i--保存Datatables.net jQuery

步骤2：导入jQuery和Datatables

const $ = require('jquery');
$.DataTable = require('datatables.net');

步骤3：定义组件

class Table extends Component { 
    componentDidMount() {
        $(this.refs.main).DataTable({
           dom: '<"data-table-wrapper"t>',
           data: this.props.names,
           columns,
           ordering: false
        });
    }

    componentWillUnmount(){
       $('.data-table-wrapper')
       .find('table')
       .DataTable()
       .destroy(true);
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            <div>
                <table ref="main" />
            </div>);
    }
}

const columns = [
    {
        title: 'Name',
        width: 120,
        data: 'name'
    },
    {
        title: 'Nickname',
        width: 180,
        data: 'nickname'
    },
];

类表扩展组件{
componentDidMount（）{
$（this.refs.main）.DataTable({
dom:“”，
数据：this.props.names，
柱，
订购：错误
});
}
组件将卸载（）{
$（'.data表包装器'）
.find（'表'）
.DataTable（）
.销毁（真实）；
}
shouldComponentUpdate（）{
返回false；
}
render（）{
返回(
);
}
}
常量列=[
{
标题：“姓名”，
宽度：120，
数据：“名称”
},
{
标题：“昵称”，
宽度：180，
数据：“昵称”
},
];

Source
也许您获取数据的ajax设置不太正确，它默认使用csv作为数据源。（我没有任何线索，只是提出一个想法）我遇到了完全相同的问题…实际上我尝试了datatables.net，我在这里得到了它的工作是datatables.net的用法