ReactJS中是否有jQuery dataTable库的包装器组件？

我正在尝试将一个只有HTML和JS的项目转换为ReactJS。我一直在使用主题（）中的“模态响应表”数据表 它使用的是DataTable jquery库。是否可以在ReactJS中以任何方式使用相同的方法。任何提示都会有帮助。提前谢谢

---

您不应该在React中直接使用Jquery数据表。Jquery在React范围之外更改dom。在React应用程序外部更改浏览器DOM意味着React可能不再处理状态、事件和UI呈现。您可以尝试从中使用此示例React数据表组件代码

从“React”导入React；
从“mdbreact”导入{MDBDataTable}；
常量数据表页=（）=>{
常数数据={
栏目：[
{
标签：“名称”，
字段：“名称”，
排序：“asc”，
宽度：150
},
{
标签：'位置'，
字段：'位置'，
排序：“asc”，
宽度：270
},
{
标签：“办公室”，
字段：'办公室'，
排序：“asc”，
宽度：200
},
{
标签：“年龄”，
字段：“年龄”，
排序：“asc”，
宽度：100
},
{
标签：“开始日期”，
字段：“日期”，
排序：“asc”，
宽度：150
},
{
标签：“工资”，
字段：“工资”，
排序：“asc”，
宽度：100
}
],
行：[
{
名字：“老虎尼克松”，
职位：'系统架构师'，
办公室：爱丁堡，
年龄：'61'，
日期：2011年4月25日，
薪金：‘$320’
},
{
名称：“Garrett Winters”，
职位：'会计'，
办公室：'东京'，
年龄：'63'，
日期：2011年7月25日，
薪金：‘$170’
},
{
姓名：“阿什顿·考克斯”，
职位：“初级技术作者”，
办公室：旧金山，
年龄：'66'，
日期：“2009/01/12”，
薪金：‘$86’
},
{
姓名：“塞德里克·凯利”，
职位：“高级Javascript开发人员”，
办公室：爱丁堡，
年龄:"22",，
日期：“2012/03/29”，
薪金：“$433”
},
{
名称：'Airi Satou'，
职位：'会计'，
办公室：'东京'，
年龄：'33'，
日期：“2008/11/28”，
薪金：‘$162’
},
{
姓名：“Brielle Williamson”，
职位：“集成专家”，
办公室：'纽约'，
年龄：'61'，
日期：“2012/12/02”，
薪金：“$372”
},
{
名字：“赫罗德·钱德勒”，
职位：“销售助理”，
办公室：旧金山，
年龄:"59",，
日期：“2012/08/06”，
薪金：‘$137’
},
{
姓名：“Rhona Davidson”，
职位：“集成专家”，
办公室：'东京'，
年龄：'55'，
日期：“2010/10/14”，
薪金：“$327”
},
{
姓名：“科琳·赫斯特”，
职位：“Javascript开发人员”，
办公室：旧金山，
年龄：'39'，
日期：“2009/09/15”，
薪金：‘$205’
},
{
名字：“索尼娅·弗罗斯特”，
职位：“软件工程师”，
办公室：爱丁堡，
年龄：'23'，
日期：“2008/12/13”，
薪金：‘$103’
},
{
姓名：“Jena Gaines”，
职位：'办公室经理'，
办公室：伦敦，
年龄:"30",，
日期：“2008/12/19”，
薪金：‘$90’
},
{
姓名：“Quinn Flynn”，
职位：'支持领导'，
办公室：爱丁堡，
年龄:"22",，
日期：“2013/03/03”，
薪金：“$342”
},
{
名称：“Charde Marshall”，
职位：'区域主任'，
办公室：旧金山，
年龄:"36",，
日期：“2008/10/16”，
薪金：‘$470’
},
{
姓名：'哈利·肯尼迪'，
职位：“高级营销设计师”，
办公室：伦敦，
年龄：'43'，
日期：“2012/12/18”，
薪金：“$313”
},
{
姓名：“Tatyana Fitzpatrick”，
职位：'区域主任'，
办公室：伦敦，
年龄：'19'，
日期：“2010/03/17”，
薪金：“$385”
},
{
姓名：“迈克尔·席尔瓦”，
职位：“营销设计师”，
办公室：伦敦，
年龄：'66'，
日期：2012年11月27日，
薪金：“$198”
},
{
姓名：“保罗·伯德”，
职位：“首席财务官（CFO）”，
办公室：'纽约'，
年龄：'64'，
日期：“2010/06/09”，
薪金：‘$725’
},
{
名字：“格洛丽亚·利特尔”，
职位：“系统管理员”，
办公室：'纽约'，
年龄:"59",，
日期：“2009/04/10”，
薪金：“$237”
},
{
姓名：“布拉德利·格里尔”，
职位：“软件工程师”，
办公室：伦敦，
年龄：41岁，
日期：“2012/10/13”，
薪金：‘$132’
},
{
姓名：“戴里奥斯”，
职位：“人事负责人”，
办公室：爱丁堡，
年龄:"35",，
日期：“2012/09/26”，
薪金：‘$217’
},
{
姓名：“Jenette Caldwell”，
职位：'发展领导'，
办公室：'纽约'，
年龄:"30",，
日期：“2011/09/03”，
薪金：“$345”
},
{
名字：“尤里·贝瑞”，
职位：“首席营销官（CMO）”，
办公室：'纽约'，
年龄:"40",，
日期：“2009/06/25”，
薪金：“$675”
},
{
名字：“凯撒·万斯”，
职位：“售前支持”，
办公室：'纽约'，
年龄:"21",，
日期：2011年12月12日，
薪金：‘$106’
},
{
名字：“多丽丝·怀尔德”，
职位：“销售助理”，
办公室：“悉尼”，
年龄：'23'，
日期：“2010/09/20”，
薪金：‘$85’
},
{
名称：“Angelica Ramos”，
位置：'池
import React from 'react';
import { MDBDataTable } from 'mdbreact';

const DatatablePage = () => {
  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Position',
        field: 'position',
        sort: 'asc',
        width: 270
      },
      {
        label: 'Office',
        field: 'office',
        sort: 'asc',
        width: 200
      },
      {
        label: 'Age',
        field: 'age',
        sort: 'asc',
        width: 100
      },
      {
        label: 'Start date',
        field: 'date',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Salary',
        field: 'salary',
        sort: 'asc',
        width: 100
      }
    ],
    rows: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        age: '61',
        date: '2011/04/25',
        salary: '$320'
      },
      {
        name: 'Garrett Winters',
        position: 'Accountant',
        office: 'Tokyo',
        age: '63',
        date: '2011/07/25',
        salary: '$170'
      },
      {
        name: 'Ashton Cox',
        position: 'Junior Technical Author',
        office: 'San Francisco',
        age: '66',
        date: '2009/01/12',
        salary: '$86'
      },
      {
        name: 'Cedric Kelly',
        position: 'Senior Javascript Developer',
        office: 'Edinburgh',
        age: '22',
        date: '2012/03/29',
        salary: '$433'
      },
      {
        name: 'Airi Satou',
        position: 'Accountant',
        office: 'Tokyo',
        age: '33',
        date: '2008/11/28',
        salary: '$162'
      },
      {
        name: 'Brielle Williamson',
        position: 'Integration Specialist',
        office: 'New York',
        age: '61',
        date: '2012/12/02',
        salary: '$372'
      },
      {
        name: 'Herrod Chandler',
        position: 'Sales Assistant',
        office: 'San Francisco',
        age: '59',
        date: '2012/08/06',
        salary: '$137'
      },
      {
        name: 'Rhona Davidson',
        position: 'Integration Specialist',
        office: 'Tokyo',
        age: '55',
        date: '2010/10/14',
        salary: '$327'
      },
      {
        name: 'Colleen Hurst',
        position: 'Javascript Developer',
        office: 'San Francisco',
        age: '39',
        date: '2009/09/15',
        salary: '$205'
      },
      {
        name: 'Sonya Frost',
        position: 'Software Engineer',
        office: 'Edinburgh',
        age: '23',
        date: '2008/12/13',
        salary: '$103'
      },
      {
        name: 'Jena Gaines',
        position: 'Office Manager',
        office: 'London',
        age: '30',
        date: '2008/12/19',
        salary: '$90'
      },
      {
        name: 'Quinn Flynn',
        position: 'Support Lead',
        office: 'Edinburgh',
        age: '22',
        date: '2013/03/03',
        salary: '$342'
      },
      {
        name: 'Charde Marshall',
        position: 'Regional Director',
        office: 'San Francisco',
        age: '36',
        date: '2008/10/16',
        salary: '$470'
      },
      {
        name: 'Haley Kennedy',
        position: 'Senior Marketing Designer',
        office: 'London',
        age: '43',
        date: '2012/12/18',
        salary: '$313'
      },
      {
        name: 'Tatyana Fitzpatrick',
        position: 'Regional Director',
        office: 'London',
        age: '19',
        date: '2010/03/17',
        salary: '$385'
      },
      {
        name: 'Michael Silva',
        position: 'Marketing Designer',
        office: 'London',
        age: '66',
        date: '2012/11/27',
        salary: '$198'
      },
      {
        name: 'Paul Byrd',
        position: 'Chief Financial Officer (CFO)',
        office: 'New York',
        age: '64',
        date: '2010/06/09',
        salary: '$725'
      },
      {
        name: 'Gloria Little',
        position: 'Systems Administrator',
        office: 'New York',
        age: '59',
        date: '2009/04/10',
        salary: '$237'
      },
      {
        name: 'Bradley Greer',
        position: 'Software Engineer',
        office: 'London',
        age: '41',
        date: '2012/10/13',
        salary: '$132'
      },
      {
        name: 'Dai Rios',
        position: 'Personnel Lead',
        office: 'Edinburgh',
        age: '35',
        date: '2012/09/26',
        salary: '$217'
      },
      {
        name: 'Jenette Caldwell',
        position: 'Development Lead',
        office: 'New York',
        age: '30',
        date: '2011/09/03',
        salary: '$345'
      },
      {
        name: 'Yuri Berry',
        position: 'Chief Marketing Officer (CMO)',
        office: 'New York',
        age: '40',
        date: '2009/06/25',
        salary: '$675'
      },
      {
        name: 'Caesar Vance',
        position: 'Pre-Sales Support',
        office: 'New York',
        age: '21',
        date: '2011/12/12',
        salary: '$106'
      },
      {
        name: 'Doris Wilder',
        position: 'Sales Assistant',
        office: 'Sidney',
        age: '23',
        date: '2010/09/20',
        salary: '$85'
      },
      {
        name: 'Angelica Ramos',
        position: 'Chief Executive Officer (CEO)',
        office: 'London',
        age: '47',
        date: '2009/10/09',
        salary: '$1'
      },
      {
        name: 'Gavin Joyce',
        position: 'Developer',
        office: 'Edinburgh',
        age: '42',
        date: '2010/12/22',
        salary: '$92'
      },
      {
        name: 'Jennifer Chang',
        position: 'Regional Director',
        office: 'Singapore',
        age: '28',
        date: '2010/11/14',
        salary: '$357'
      },
      {
        name: 'Brenden Wagner',
        position: 'Software Engineer',
        office: 'San Francisco',
        age: '28',
        date: '2011/06/07',
        salary: '$206'
      },
      {
        name: 'Fiona Green',
        position: 'Chief Operating Officer (COO)',
        office: 'San Francisco',
        age: '48',
        date: '2010/03/11',
        salary: '$850'
      },
      {
        name: 'Shou Itou',
        position: 'Regional Marketing',
        office: 'Tokyo',
        age: '20',
        date: '2011/08/14',
        salary: '$163'
      },
      {
        name: 'Michelle House',
        position: 'Integration Specialist',
        office: 'Sidney',
        age: '37',
        date: '2011/06/02',
        salary: '$95'
      },
      {
        name: 'Suki Burks',
        position: 'Developer',
        office: 'London',
        age: '53',
        date: '2009/10/22',
        salary: '$114'
      },
      {
        name: 'Prescott Bartlett',
        position: 'Technical Author',
        office: 'London',
        age: '27',
        date: '2011/05/07',
        salary: '$145'
      },
      {
        name: 'Gavin Cortez',
        position: 'Team Leader',
        office: 'San Francisco',
        age: '22',
        date: '2008/10/26',
        salary: '$235'
      },
      {
        name: 'Martena Mccray',
        position: 'Post-Sales support',
        office: 'Edinburgh',
        age: '46',
        date: '2011/03/09',
        salary: '$324'
      },
      {
        name: 'Unity Butler',
        position: 'Marketing Designer',
        office: 'San Francisco',
        age: '47',
        date: '2009/12/09',
        salary: '$85'
      },
      {
        name: 'Howard Hatfield',
        position: 'Office Manager',
        office: 'San Francisco',
        age: '51',
        date: '2008/12/16',
        salary: '$164'
      },
      {
        name: 'Hope Fuentes',
        position: 'Secretary',
        office: 'San Francisco',
        age: '41',
        date: '2010/02/12',
        salary: '$109'
      },
      {
        name: 'Vivian Harrell',
        position: 'Financial Controller',
        office: 'San Francisco',
        age: '62',
        date: '2009/02/14',
        salary: '$452'
      },
      {
        name: 'Timothy Mooney',
        position: 'Office Manager',
        office: 'London',
        age: '37',
        date: '2008/12/11',
        salary: '$136'
      },
      {
        name: 'Jackson Bradshaw',
        position: 'Director',
        office: 'New York',
        age: '65',
        date: '2008/09/26',
        salary: '$645'
      },
      {
        name: 'Olivia Liang',
        position: 'Support Engineer',
        office: 'Singapore',
        age: '64',
        date: '2011/02/03',
        salary: '$234'
      },
      {
        name: 'Bruno Nash',
        position: 'Software Engineer',
        office: 'London',
        age: '38',
        date: '2011/05/03',
        salary: '$163'
      },
      {
        name: 'Sakura Yamamoto',
        position: 'Support Engineer',
        office: 'Tokyo',
        age: '37',
        date: '2009/08/19',
        salary: '$139'
      },
      {
        name: 'Thor Walton',
        position: 'Developer',
        office: 'New York',
        age: '61',
        date: '2013/08/11',
        salary: '$98'
      },
      {
        name: 'Finn Camacho',
        position: 'Support Engineer',
        office: 'San Francisco',
        age: '47',
        date: '2009/07/07',
        salary: '$87'
      },
      {
        name: 'Serge Baldwin',
        position: 'Data Coordinator',
        office: 'Singapore',
        age: '64',
        date: '2012/04/09',
        salary: '$138'
      },
      {
        name: 'Zenaida Frank',
        position: 'Software Engineer',
        office: 'New York',
        age: '63',
        date: '2010/01/04',
        salary: '$125'
      },
      {
        name: 'Zorita Serrano',
        position: 'Software Engineer',
        office: 'San Francisco',
        age: '56',
        date: '2012/06/01',
        salary: '$115'
      },
      {
        name: 'Jennifer Acosta',
        position: 'Junior Javascript Developer',
        office: 'Edinburgh',
        age: '43',
        date: '2013/02/01',
        salary: '$75'
      },
      {
        name: 'Cara Stevens',
        position: 'Sales Assistant',
        office: 'New York',
        age: '46',
        date: '2011/12/06',
        salary: '$145'
      },
      {
        name: 'Hermione Butler',
        position: 'Regional Director',
        office: 'London',
        age: '47',
        date: '2011/03/21',
        salary: '$356'
      },
      {
        name: 'Lael Greer',
        position: 'Systems Administrator',
        office: 'London',
        age: '21',
        date: '2009/02/27',
        salary: '$103'
      },
      {
        name: 'Jonas Alexander',
        position: 'Developer',
        office: 'San Francisco',
        age: '30',
        date: '2010/07/14',
        salary: '$86'
      },
      {
        name: 'Shad Decker',
        position: 'Regional Director',
        office: 'Edinburgh',
        age: '51',
        date: '2008/11/13',
        salary: '$183'
      },
      {
        name: 'Michael Bruce',
        position: 'Javascript Developer',
        office: 'Singapore',
        age: '29',
        date: '2011/06/27',
        salary: '$183'
      },
      {
        name: 'Donna Snider',
        position: 'Customer Support',
        office: 'New York',
        age: '27',
        date: '2011/01/25',
        salary: '$112'
      }
    ]
  };

  return (
    <MDBDataTable
      striped
      bordered
      hover
      data={data}
    />
  );
}

export default DatatablePage

import React from 'react';
import { MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

const TablePage = (props) => {
  const data_icons = {
    columns: [
      {
        'label': '#',
        'field': 'id',
        'sort': 'asc'
      },
      {
        'label': [<i key="Lorem" className="fa fa-leaf mr-2 blue-text" aria-hidden="true"></i>, 'Lorem'],
        'field': 'lorem',
        'sort': 'asc'
      },
      {
        'label': [<i key="Ipsum" className="fa fa-leaf mr-2 teal-text" aria-hidden="true"></i>, 'Ipsum'],
        'field': 'ipsum',
        'sort': 'asc'
      },
      {
        'label': [<i key="Dolor" className="fa fa-leaf mr-2 indigo-text" aria-hidden="true"></i>, 'Dolor'],
        'field': 'dolor',
        'sort': 'asc'
      }
    ],
    rows: [
      {
        'id': 1,
        'lorem': [<i key="cell1" className="far fa-gem mr-2 grey-text" aria-hidden="true"></i>, 'Cell1'],
        'ipsum': [<i key="cell2" className="fa fa-download mr-2 grey-text" aria-hidden="true"></i>, 'Cell2'],
        'dolor': [<i key="cell3" className="fa fa-book mr-2 grey-text" aria-hidden="true"></i>, 'Cell3']
      },
      {
        'id': 2,
        'lorem': [<i key="cell1" className="fa fa-graduation-cap mr-2 grey-text" aria-hidden="true"></i>, 'Cell1'],
        'ipsum': [<i key="cell2" className="fa fa-gift mr-2 grey-text" aria-hidden="true"></i>, 'Cell2'],
        'dolor': [<i key="cell3" className="far fa-image mr-2 grey-text" aria-hidden="true"></i>, 'Cell3']
      },
      {
        'id': 3,
        'lorem': [<i key="cell1" className="fa fa-magic mr-2 grey-text" aria-hidden="true"></i>, 'Cell1'],
        'ipsum': [<i key="cell2" className="fa fa-table mr-2 grey-text" aria-hidden="true"></i>, 'Cell2'],
        'dolor': [<i key="cell3" className="fa fa-edit mr-2 grey-text" aria-hidden="true"></i>, 'Cell3']
      }
    ]
  };

  return(
    <MDBTable btn fixed>
      <MDBTableHead columns={data_icons.columns} />
      <MDBTableBody rows={data_icons.rows} />
    </MDBTable>
  );
};

export default TablePage;