如何写好一个React table component

最近上手作一个公司项目，前端用React， 因此为了减小冗余代码，对组件的复用率要求很高，这不须要一个React table component

为了实现当前的业务需求小编很快写了第一个component

       分析：table分为两个部分header和body，header是固定的，而body的列数固定，可是行数不固定。对于data，也就是table的body，是一个对象数组，每个对象就是table的一行，对象的属性名称也是固定的。根据上述分析结果，我写了下面这个component。

1.第一个table component

 先上代码：

import React from 'react' import PropTypes from 'prop-types' import { Table } from 'react-bootstrap' import { RowHead } from './style' const TableHeader = props => { const { data, headerFormatter } = props return ( <thead>
            <RowHead> {data && data.map(item => <th key={item}> {headerFormatter ? headerFormatter(item) : item}</th>)}
            </RowHead>

        </thead>
 ) } TableHeader.propTypes = { data: PropTypes.arrayOf(PropTypes.string).isRequired, headerFormatter: PropTypes.func.isRequired, } const TableColumns = props => { const { data, columnNames, formatter } = props return ( <tdoby> {data && columnNames && data.map(item => ( <tr key={item.id}> {columnNames.map(key => ( <td key={item.id}>{formatter(key, item[key], item.id)}</td>
 ))} </tr>
 ))} </tdoby>
 ) } TableColumns.propTypes = { data: PropTypes.arrayOf(PropTypes.object).isRequired, columnNames: PropTypes.arrayOf(PropTypes.string).isRequired, formatter: PropTypes.func.isRequired, } const TableContainer = ({ data, headers, columnNames, formatter, headerFormatter }) => ( <Table responsive>
        <TableHead data={header} headerFormatter={headerFormatter} />
        <TableColumns data={data} columnNames={columnNames} formatter={formatter} />
    </Table>
) TableContainer.propTypes = { headers: PropTypes.arrayOf(PropTypes.string).isRequired, headerFormatter: PropTypes.func.isRequired, columnNames: PropTypes.arrayOf(PropTypes.string).isRequired, formatter: PropTypes.func.isRequired, data: PropTypes.arrayOf(PropTypes.object).isRequired, } export default TableContainer

      总结： 

       细心的同窗不难发现，首先有许多重复的代码， TableContainer.propTypes TableHeader.propTypes  TableColumns.propTypes

       对于header，若是这么写，header就显示一样的format，不能实现对表头每个名称进行个性化的定制。

       body一样的道理，使全部的行得每一个元素都具备相同的format，或者在使用此component时，须要进行大量的判断，根据不一样的字段，赋予不一样的format。这种component简直有同于无。 

       很明显，不改进，codeReview确定过不了。

2.第二个react table component 

import React from 'react' import PropTypes from 'prop-types' import { Table } from 'react-bootstrap' import { RowHead } from './style' const HeaderCell = props => { const { header, headerFormatter } = props return <th> {headerFormatter ? headerFormatter(header) : header} </th>
} const HeaderCellPropTypes = { header: PropTypes.arrayOf(PropTypes.string).isRequired, headerFormatter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, } HeaderCell.propTypes = HeaderCellPropTypes const ColumnCell = props => { const { value, formatter, coluumnId } = props return <td> {formatter ? formatter(value, coluumnId) : value}</td>
} ColumnCell.propTypes = { value: PropTypes.string.isRequired, formatter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, coluumnId: PropTypes.string.isRequired, } const TableContainer = ({ cloumns, data }) => ( <Table responsive>
        <thead>
            <RowHead> {cloumns && cloumns.map(item => ( <HeaderCell key={item.header} header={item.header} headerFormatter={item.headerFormatter} />
 ))} </RowHead>
        </thead>
        <tbody> {data && cloumns && data.map(item => ( <tr key={item.id}> {cloumns.map(cell => ( <ColumnCell key={item.id} coluumnId={item.id} formatter={item.formatter} value={item[cell.accessor]} />
 ))} </tr>
 ))} </tbody>
    </Table>
) TableContainer.propTypes = { cloumns: PropTypes.arrayOf( PropTypes.shape({ ...HeaderCellPropTypes, accessor: PropTypes.oneOf(PropTypes.func, PropTypes.string), formatter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired, }) ).isRequired, data: PropTypes.arrayOf(PropTypes.object).isRequired,
}

分析： 第一个Component的全部的不足，在第二个component中变成了优点。good

export default ReactTableComponent