封装React AntD的table表格组件

tnnyang

封装组件是为了能在开发过程中高度复用功能和样式相似的组件，以便我们只关注于业务逻辑层的处理，提高开发效率，提高逼格，降低代码重复率，降低劳动时间，减少加班的可能。

本次组件的封装采用了函数式组件即无状态组件的方式来提高页面渲染性能，由于无状态组件在数据变更后不会主动触发页面的重新渲染，所以本次的封装也用到了React Hooks。下面简要介绍一下函数式组件和React Hooks。

函数式组件是被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会再有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。但函数式组件是没有this和ref的，如果强行给函数式组件添加ref会报一个\'Function components cannot have string refs. We recommend using useRef() instead.\'的错误。函数式组件也没有生命周期，没有所谓的componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate等方法。

React Hooks是react16.8引入的特性，他允许你在不写class的情况下操作state和react的其他特性。Hook就是JavaScript函数，但是使用它们会有两个额外的规则：

  • 只能在函数最外层调用Hook，不能在循环、条件判断或者子函数中调用；

  • 只能在React的函数组件中调用Hook，不能在其他JavaScript函数中调用(自定义Hook除外)。

React Hooks中用的比较频繁的方法：

  • useState

  • useEffect

  • useContext

  • useReducer

  • useMemo

  • useRef

  • useImperativeHandle

由于以上方法的具体介绍及使用的篇幅过大，故请自行查阅API或资料，这里不再展开描述。

另外，本次封装一部分采用了JSX来创建虚拟dom节点，一部分采用了createElement方法来创建虚拟dom节点，createElement方法接收三个参数：

第一个参数：必填，可以是一个html标签名称字符串如span、div、p等，也可以是一个react组件；

第二个参数：选填，创建的标签或组件的属性，用对象方式表示；

第三个参数：选填，创建的标签或组件的子节点，可以是一个字符串或一个组件，也可以是一个包含了字符串或组件的数组，还可以是一个采用createElement创建的虚拟dom节点。

createElement方法可能用的人不会很多，因为现在有了类似于html的JavaScript语法糖JSX，使用和理解起来也较为直观和方便，符合我们对html结构的认知。但其实JSX被babel编译后的呈现方式就是使用createElement方法创建的虚拟dom，至于为何使用createElement方法，私心觉得可以提升编译打包效率。另外本次封装组件时有些地方也使用了JSX，是觉得在那些地方使用JSX更舒服，而有些地方使用createElement方法私心也觉得更符合js的编写习惯，如果你觉得在一个组件中既有JSX又有createElement会很乱的话，你可以统一使用一种即可。

本次封装所使用到的方法的介绍基本完毕，以下是组件封装的具体实现部分。

先贴一张最后实现的效果图：

1、所封装的antd table组件table.js

import React, { createElement, useState, useImperativeHandle } from \'react\'
import PropTypes from \'prop-types\'
import { Link } from "react-router-dom"
import { Table } from \'antd\';
import { timestampToTime, currency } from \'@/utils\'

const h = createElement;
const TableComp = ({columns, dataSource, hasCheck, cRef, getCheckboxProps}) => {
  const empty = \'-\',
    [selectedRowKeys, setSelectedRowKeys ] = useState([]),
    [selectedRows, setSelectedRows] = useState([]),
    render = {
      Default: v => v,
      Enum: (v, {Enum}) => {
        if(!Enum[v]) return empty;
        return Enum[v]
      },
      Format: (v, {format}, row) => format(v, row),
      Currency: v => currency(v),
      Date: v => timestampToTime(v, \'second\'),
      Link: (v, {url}) => <Link to={url}>{v}</Link>,
      Action: (v, {value}, row) => {
        const result = value.filter(n => {
          const {filter = () => true} = n
          return filter(row)
        })
    
        return result.map(t => <span className="table-link" onClick={() => t.click(row)} key={t.label}>{t.label}</span>)
      },
    }

  columns = columns.map(n => {
    const { type = \'Default\' } = n;
    return {...n, render: (v, row) => (!v || v.length < 1) && type != \'Action\' ? empty : render[type](v, n, row)}
  })

  //父组件获取selectedRowKeys的方法-cRef就是父组件传过来的ref
  useImperativeHandle(cRef, () => ({
    //getSelectedRowKeys就是暴露给父组件的方法
    getSelectedRowKeys: () => selectedRowKeys,
    getSelectedRows: () => selectedRows
  }));

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    setSelectedRowKeys(selectedRowKeys);
    setSelectedRows(selectedRows);
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    getCheckboxProps: record => getCheckboxProps(record)
  };

  return hasCheck ? h(Table, {columns, dataSource, rowSelection}) : h(Table, {columns, dataSource})
}

TableComp.propTypes = {
  columns: PropTypes.array.isRequired,    //表格头部
  dataSource: PropTypes.array.isRequired, //表格数据
  hasCheck: PropTypes.bool,               //表格行是否可选择
  cRef: PropTypes.object,                 //父组件传过来的获取组件实例对象或者是DOM对象
  getCheckboxProps: PropTypes.func,       //选择框的默认属性配置
}

export default TableComp

2、时间戳格式化timestampToTime.js

export const timestampToTime = (timestamp, type) => {
  let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let Y = date.getFullYear() + \'-\';
  let M = (date.getMonth() + 1 < 10 ? \'0\' + (date.getMonth() + 1) : date.getMonth() + 1) + \'-\';
  let D = date.getDate() < 10 ? \'0\' + date.getDate() + \' \' : date.getDate() + \'\';
  let h = date.getHours() < 10 ? \'0\' + date.getHours() + \':\' : date.getHours() + \':\';
  let m = date.getMinutes() < 10 ? \'0\' + date.getMinutes() + \':\' : date.getMinutes() + \':\';
  let s = date.getSeconds() < 10 ? \'0\' + date.getSeconds() : date.getSeconds();
 
  if (type == \'second\') {
    return Y + M + D + \' \' + h + m + s;
  } else {
    return Y + M + D
  }
}

3、金额千分位currency.js

export const currency = v => {
  let [n, d = []] = v.toString().split(\'.\');
  return [n.replace(/(\d)(?=(?:\d{3})+$)/g, \'$1,\')].concat(d).join(\'.\');
};

简单介绍下封装的table组件，本组件基本涵盖了大多数情况下我们所用到的表格组件的情况，包括：操作按钮的权限控制、某一列的跳转、某一列的字段映射以及金额千分位、时间戳格式化和某一列数组数据的循环展示、表格是否可选择等等。如还有其他需求，可自行添加即可。

4、table组件的使用方法：

import React, { useRef } from \'react\'
import { Button } from \'antd\'
import Table from \'./table\'

const TableDemo = () => {
  const permission = ["handle", "pass", "refuse", "reApply", \'export\'], Enum = {
    CREATED: \'代办理\',
    PASS: \'待审批\',
    REJECT: \'驳回\',
    REFUSE: \'拒绝\',
  };

  const statisticFormat = val => val.map((t, idx) => <span key={idx} style={{marginRight: \'5px\'}}>{t.total}</span>)

  const columns = [
    { title: \'姓名\', dataIndex: \'name\', key: \'name\', type: \'Link\', url: \'https://www.baidu.com\' },
    { title: \'年龄\', dataIndex: \'age\', key: \'age\' },
    { title: \'状态\', dataIndex: \'status\', key: \'status\', type: \'Enum\', Enum, },
    { title: \'预警统计\', dataIndex: \'statistic\', key: \'statistic\', type: \'Format\', format: statisticFormat },
    { title: \'存款\', dataIndex: \'money\', key: \'money\', type: \'Currency\' },
    { title: \'日期\', dataIndex: \'date\', key: \'date\', type: \'Date\'},
    { title: \'操作\', dataIndex: \'action\', key: \'action\', type: \'Action\', value: [
      {label: "查看", click: data => {console.log(data)}},
      {label: "办理", click: data => {}, filter: ({status}) => status == \'CREATED\' && permission.some(n => n == \'handle\')},
      {label: "通过", click: data => {}, filter: ({status}) => status == \'PASS\' && permission.some(n => n == \'pass\')},
      {label: "驳回", click: data => {}, filter: ({status}) => status == \'REJECT\' && permission.some(n => n == \'reject\')},
      {label: "拒绝", click: data => {}, filter: ({status}) => status == \'CREATED\' && permission.some(n => n == \'refuse\')},
      {label: "重新付款", click: data => {}, filter: ({status}) => status == \'REAPPLY\' && permission.some(n => n == \'reApply\')},
    ]},
  ]

  const dataSource = [
    {key: 1, name: \'小坏\', age: 20, status: \'CREATED\', date: 1596791666000, statistic: [{level: 3, total: 5}, {level: 2, total: 7}, {level: 1, total: 20}, {level: 0, total: 0}], money: 200000000000},
    {key: 2, name: \'tnnyang\', age: 18, status: \'PASS\', date: 1596791666000, statistic: [],  money: 2568912357893},
    {key: 3, name: \'xiaohuai\', status: \'REJECT\', statistic: [], money: 6235871},
    {key: 4, name: \'陈公子\', age: 21, status: \'REAPPLY\', date: 1596791666000, statistic: []},
  ]

  const config = {
    columns,
    dataSource,
    hasCheck: true,  //是否显示表格第一列的checkbox复选框
    getCheckboxProps: record => {return {disabled: record.status == \'REJECT\'}}  //table表格rowSelection的禁用
  }

  //点击获取通过checkbox复选框选中的表格
  const childRef = useRef();
  const getTableChecked = () => {
    const selectedRowKeys = childRef.current.getSelectedRowKeys(), selectedRows = childRef.current.getSelectedRows();
    console.log(selectedRowKeys)
    console.log(selectedRows)
  }

  return <div>
    <Table {...config} cRef={childRef} />
    <Button type="primary" onClick={getTableChecked}>获取选择的列表项</Button>
  </div>
}

export default TableDemo

最后再贴一下本次封装所用到的各个包的版本：

react: 16.8.6,

react-dom: 16.8.6,

react-router-dom: 5.0.0,

antd: 4.3.5,

@babel/core: 7.4.4,

babel-loader: 8.0.5

其实最主要的是react和antd的版本，其中antd4和antd3在table组件上的差异还是很大的，在其他组件上的差异也是很大的。

------------------------------------ 分割线 -----------------------------------

有大佬在我另一篇博文封装react antd的form表单组件的评论区提出关于合并表格的单元格功能等，我一想，合并单元格也是我们在使用表格组件时可能会经常遇到的需求，那么就在之前封装的基础上加上合并单元格的实现吧。

在看了antd的表格组件的实例后觉得合并单元格其实也很简单，是基于单元格的值和索引来实现的，那么在我们之前封装的基础上再套一层合并单元格的函数就可以了。

带有合并单元格功能的table封装组件的完整代码如下：

import React, { createElement, useState, useImperativeHandle } from \'react\'
import PropTypes from \'prop-types\'
import { Link } from "react-router-dom"
import { Table } from \'antd\';
import { timestampToTime, currency } from \'@/utils\'

const h = createElement;

const TableComp = ({columns, dataSource, hasCheck, cRef, getCheckboxProps, bordered}) => {
  const empty = \'-\',
    [selectedRowKeys, setSelectedRowKeys ] = useState([]),
    [selectedRows, setSelectedRows] = useState([]),
    render = {
      Default: v => v,
      Enum: (v, {Enum}) => {
        if(!Enum[v]) return empty
        return Enum[v]
      },
      Format: (v, {format}, row) => format(v, row),
      Currency: v => currency(v),
      Date: v => timestampToTime(v, \'second\'),
      Link: (v, {url}) => <Link to={url}>{v}</Link>,
      Action: (v, {value}, row) => {
        const result = value.filter(n => {
          const {filter = () => true} = n
          return filter(row)
        })
    
        return result.map(t => <span className="table-link" onClick={() => t.click(row)} key={t.label}>{t.label}</span>)
      },
    }

  columns = columns.map(n => {
    const { type = \'Default\', merge } = n;
    return {...n, render: (v, row, index) => (!v || v.length < 1) && type != \'Action\' ? empty : merge && typeof merge == \'function\' ? merge(render[type](v, n, row), index) : render[type](v, n, row)}
  })

  //父组件获取selectedRowKeys的方法-cRef就是父组件传过来的ref
  useImperativeHandle(cRef, () => ({
    //getSelectedRowKeys就是暴露给父组件的方法
    getSelectedRowKeys: () => selectedRowKeys,
    getSelectedRows: () => selectedRows
  }));

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    setSelectedRowKeys(selectedRowKeys);
    setSelectedRows(selectedRows);
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    getCheckboxProps: record => getCheckboxProps(record)
  };

  return hasCheck ? h(Table, {columns, dataSource, rowSelection, bordered}) : h(Table, {columns, dataSource, bordered})
}

Components.propTypes = {
  columns: PropTypes.array.isRequired,     //表格头部
  dataSource: PropTypes.array.isRequired,  //表格数据
  onChange: PropTypes.func,                //表格翻页函数
  hasCheck: PropTypes.bool,                //表格行是否可选择
  cRef: PropTypes.object,                  //父组件传过来的获取组件实例对象或者是DOM对象
  getCheckboxProps: PropTypes.func,        //选择框的默认属性配置
}

export default TableComp

使用方法完整代码：

import React, { useRef } from \'react\'
import { Button } from \'antd\'
import Table from \'./mergeTable\'
import \'./demo.css\'

const TableDemo = () => {
  const permission = ["handle", "pass", "refuse", "reApply", \'export\'], Enum = {
    CREATED: \'代办理\',
    PASS: \'待审批\',
    REJECT: \'驳回\',
    REFUSE: \'拒绝\',
  };

  const statisticFormat = val => val.map((t, idx) => <span key={idx} style={{marginRight: \'5px\'}}>{t.total}</span>)

  const columns = [
    { title: \'姓名\', dataIndex: \'name\', key: \'name\', type: \'Link\', url: \'https://www.baidu.com\' },
    { title: \'身份证号/年龄\', dataIndex: \'ID\', key: \'ID\', colSpan: 2, },
    { title: \'年龄\', dataIndex: \'age\', key: \'age\', colSpan: 0, },
    { title: \'状态\', dataIndex: \'status\', key: \'status\', type: \'Enum\', Enum, merge: (v, index) => {
      const obj = {
        children: v,
        props: {},
      };

      if (index != 2) {
        return v;
      }
      //从第二行开始合并，合并两列 - index从0开始，colSpan代表合并行。
      if (index === 2) {
        obj.props.colSpan = 2;
      }
      return obj;
    }},
    { title: \'规则\', dataIndex: \'rule\', key: \'rule\', merge: (v, index) => {
      const obj = {
        children: v,
        props: {},
      };
      //从第二行开始合并，合并两列 - index从0开始，colSpan代表合并行。
      if (index === 2) {
        obj.props.colSpan = 0;
      }
      return obj;
    }},
    { title: \'预警统计\', dataIndex: \'statistic\', key: \'statistic\', type: \'Format\', format: statisticFormat },
    { title: \'存款\', dataIndex: \'money\', key: \'money\', type: \'Currency\', merge: (v, index) => {
      const obj = {
        children: v,
        props: {},
      };
      //从第二行开始合并，合并两行 - index从0开始，rowSpan代表合并列，rowSpan = 2代表合并两列，即将存款列的第二行和第三行合并
      if (index === 1) {
        obj.props.rowSpan = 2;
      }
      //colSpan或者rowSpan设值为0时，设置的表格不会渲染，即表格数据不会展示出来。这段代码的意思是第三行的数据不展示并将第三行合并到第二行
      if (index === 2) {
        obj.props.rowSpan = 0;
      }
      return obj;
    }},
    { title: \'日期\', dataIndex: \'date\', key: \'date\', type: \'Date\'},
    { title: \'操作\', dataIndex: \'action\', key: \'action\', type: \'Action\', value: [
      {label: "查看", click: data => {console.log(data)}},
      {label: "办理", click: data => {}, filter: ({status}) => status == \'CREATED\' && permission.some(n => n == \'handle\')},
      {label: "通过", click: data => {}, filter: ({status}) => status == \'PASS\' && permission.some(n => n == \'pass\')},
      {label: "驳回", click: data => {}, filter: ({status}) => status == \'REJECT\' && permission.some(n => n == \'reject\')},
      {label: "拒绝", click: data => {}, filter: ({status}) => status == \'CREATED\' && permission.some(n => n == \'refuse\')},
      {label: "重新付款", click: data => {}, filter: ({status}) => status == \'REAPPLY\' && permission.some(n => n == \'reApply\')},
    ]},
  ]

  const dataSource = [
    {key: 1, name: \'小坏\', ID: \'abc\', age: 20, status: \'CREATED\', rule: \'标准\', date: 1596791666000, statistic: [{level: 3, total: 5}, {level: 2, total: 7}, {level: 1, total: 20}, {level: 0, total: 0}], money: 200000000000},
    {key: 2, name: \'tnnyang\', ID: \'def\', age: 18, status: \'PASS\', rule: \'个性化\', date: 1596791666000, statistic: [],  money: 2568912357893},
    {key: 3, name: \'xiaohuai\', ID: \'ghi\', status: \'REJECT\', rule: \'标准\', statistic: [], money: 6235871},
    {key: 4, name: \'陈公子\', ID: \'jkl\', age: 21, status: \'REAPPLY\', rule: \'个性化\', date: 1596791666000, statistic: []},
  ]

  const config = {
    columns,
    dataSource,
    getCheckboxProps: record => {return {disabled: record.status == \'REJECT\'}},  //table表格rowSelection的禁用
    bordered: true,
  }

  //点击获取通过checkbox复选框选中的表格
  const childRef = useRef();
  const getTableChecked = () => {
    const selectedRowKeys = childRef.current.getSelectedRowKeys(), selectedRows = childRef.current.getSelectedRows();
    console.log(selectedRowKeys)
    console.log(selectedRows)
  }

  return <div style={{margin: \'20px\'}}>
    <Table {...config} cRef={childRef} />
    <Button type="primary" onClick={getTableChecked}>获取选择的列表项</Button>
  </div>
}

export default TableDemo

分类：

技术点：

相关文章：

  • 2021-02-05
  • 2022-03-05
  • 2022-12-23
  • 2021-12-08
  • 2022-12-23
  • 2021-12-07
  • 2021-06-09
  • 2021-10-03
猜你喜欢
  • 2020-10-12
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-01
  • 2021-04-19
  • 2021-12-17
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode