封裝react antd的表格table組件

封裝組件是爲了能在開發過程當中高度複用功能和樣式類似的組件，以便咱們只關注於業務邏輯層的處理，提升開發效率，提升逼格，下降代碼重複率，下降勞動時間，減小加班的可能。

本次組件的封裝採用了函數式組件即無狀態組件的方式來提升頁面渲染性能，因爲無狀態組件在數據變動後不會主動觸發頁面的從新渲染，因此本次的封裝也用到了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會很亂的話，你能夠統一使用一種便可。

本次封裝所使用到的方法的介紹基本完畢，如下是組件封裝的具體實現部分。

先貼一張最後實現的效果圖：

一、所封裝的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 => {
        if(!v) return empty
        return v
      },
      Enum: (v, row, {Enum}) => {
        if(!v || !Enum[v]) return empty
        return Enum[v]
      },
      Loop: v => {
        if(v.length < 1) return empty
        return v.map((t, idx) => <span key={idx} style={{marginRight: '5px'}}>{t.total}</span>);
      },
      Action: (v, row, {action}) => {
        let result = action.filter(n => {
          let {filter = () => true} = n
          return filter(row)
        })
    
        return result.map(c => <span className="table-link" onClick={() => c.click(row)} key={c.label}>{c.label}</span>)
      },
      Currency: v => {
        if(!v) return empty
        return currency(v)
      },
      Date: v => {
        if(!v) return empty
        return timestampToTime(v, 'second')
      },
      Link: (v, row, {url}) => {
        if(!v) return empty
        return <Link to={url}>{v}</Link>
      }
    }

  columns = columns.map(n => {
    let { type = 'Default', title, dataIndex, key } = n;
    return {title, dataIndex, key, render: (v, row) => render[type](v, row, n) }
  })

  //父組件獲取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)
  };

  if(hasCheck) return h(Table, {columns, dataSource, rowSelection})
  return 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

二、時間戳格式化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
  }
}

三、金額千分位currency.js

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

簡單介紹下封裝的table組件，本組件基本涵蓋了大多數狀況下咱們所用到的表格組件的狀況，包括：操做按鈕的權限控制、某一列的跳轉、某一列的字段映射以及金額千分位、時間戳格式化和某一列數組數據的循環展現、表格是否可選擇等等。如還有其餘需求，可自行添加便可。

四、table組件的使用方法：

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

const TableDemo = () => {
  const permission = ["handle", "pass", "refuse", "reApply", 'export'], Enum = {
    CREATED: '代辦理',
    PASS: '待審批',
    REJECT: '駁回',
    REFUSE: '拒絕',
  };

  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: 'Loop'},
    { title: '存款', dataIndex: 'money', key: 'money', type: 'Currency' },
    { title: '日期', dataIndex: 'date', key: 'date', type: 'Date'},
    { title: '操做', dataIndex: 'action', key: 'action', type: 'Action', action: [
      {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組件上的差別仍是很大的，在其餘組件上的差別也是很大的。