摘要：加這兩個(gè)屬性的原因很容易想到，因?yàn)槲覀冊(cè)趯?xiě)表格相關(guān)業(yè)務(wù)時(shí)，樣式里面寫(xiě)的最多的就是單元格的寬度和對(duì)齊方式。然而，寫(xiě)的表格后粘貼在中，整行的內(nèi)容都在一個(gè)單元格里面，用寫(xiě)的表格則能夠幾乎保持原本的格式，所以我們這次用了原生的來(lái)寫(xiě)表格。

Table 是最常用展示數(shù)據(jù)的方式之一，可是一個(gè)產(chǎn)品中往往很多非常類(lèi)似的 Table，但是我們碰到的情況往往是 Table A 要排序，Table B 不需要排序，等等這種看起來(lái)非常類(lèi)似，但是又不完全相同的表格。這種情況下，到底要不要抽取一個(gè)公共的 Table 組件呢？對(duì)于這個(gè)問(wèn)題，我們團(tuán)隊(duì)也糾結(jié)了很久，先后開(kāi)發(fā)了多個(gè)版本的 Table 組件，在最近的一個(gè)項(xiàng)目中，產(chǎn)出了第三版 Table 組件，能夠較好的解決靈活性和公共邏輯抽取的問(wèn)題。本文將會(huì)詳細(xì)的講述這種 Table 組件解決方案產(chǎn)出的過(guò)程和一些思考。

首先我們看到的是不使用任何組件實(shí)現(xiàn)一個(gè)業(yè)務(wù)表格的代碼：

import React, { Component } from "react";

const columnOpts = [
  { key: "a", name: "col-a" },
  { key: "b", name: "col-b" },
];

function SomeTable(props) {
  const { data } = props;

  return (
    

      

        {
          columnOpts.map((opt, colIndex) => (
            
{opt.name}
          ))
        }
      
      

        {
          data.map((entry, rowIndex) => (
            

              {
                columnOpts.map((opt, colIndex) => (
                  {entry[opt.key]}
                ))
              }
            
          ))
        }
      
    
  );
}

這種實(shí)現(xiàn)方法帶來(lái)的問(wèn)題是：

每次寫(xiě)表格需要寫(xiě)很多布局類(lèi)的樣式

重復(fù)代碼很多，而且項(xiàng)目成員之間很難達(dá)到統(tǒng)一，A 可能喜歡用表格來(lái)布局，B 可能喜歡用 ul 來(lái)布局

相似但是不完全相同的表格很難復(fù)用

組件是對(duì)數(shù)據(jù)和方法的一種封裝，在封裝之前，我們總結(jié)了一下表格型的展示的特點(diǎn)：

輸入數(shù)據(jù)源較統(tǒng)一，一般為對(duì)象數(shù)組

thead 中的單元格大部分只是展示一些名稱，也有一些個(gè)性化的內(nèi)容，如帶有排序 icon 的單元格

tbody 中的部分單元格只是簡(jiǎn)單的讀取一些值，很多單元格的都有自己的邏輯，但是在一個(gè)產(chǎn)品中通常很多類(lèi)似的單元格

列是有順序的，更適合以列為單位來(lái)添加布局樣式

基于以上特點(diǎn)，我們希望 Table 組件能夠滿足以下條件：

接收一個(gè) 對(duì)象數(shù)組 和 所有列的配置 為參數(shù)，自動(dòng)創(chuàng)建基礎(chǔ)的表格內(nèi)容

thead 和 tbody 中的單元格都能夠定制化，以滿足不同的需求

至此，我們首先想到 Table 組件應(yīng)該長(zhǎng)成這樣的：

const columnOpts =  [
  { key: "a", name: "col-a", onRenderTd: () => {} },
  { key: "b", name: "col-b", onRenderTh: () => {}, onRenderTd: () => {} },
];

其中 onRenderTd 和 onRenderTh 分別是渲染 td 和 th 時(shí)的回調(diào)函數(shù)。
到這里我們發(fā)現(xiàn)對(duì)于稍微復(fù)雜一點(diǎn)的 table，columnOpts 將會(huì)是一個(gè)非常大的配置數(shù)組，我們有沒(méi)有辦法不使用數(shù)組來(lái)維護(hù)這些配置呢？這里我們想到的一個(gè)辦法是創(chuàng)建一個(gè) Column 的組件，讓大家可以這么來(lái)寫(xiě)這個(gè) table:

  

這樣大家就可以像寫(xiě)HTML一樣把一個(gè)簡(jiǎn)單的表格給搭建出來(lái)了。

有了 Table 的雛形，再聯(lián)系下寫(xiě)表格的常見(jiàn)需求，我們給 Column 添加了 width 和 align 屬性。加這兩個(gè)屬性的原因很容易想到，因?yàn)槲覀冊(cè)趯?xiě)表格相關(guān)業(yè)務(wù)時(shí)，樣式里面寫(xiě)的最多的就是單元格的寬度和對(duì)齊方式。我們來(lái)看一下 Column 的實(shí)現(xiàn)：

import React, { PropTypes, Component } from "react";

const propTypes = {
  name: PropTypes.string,
  dataKey: PropTypes.string.isRequired,
  align: PropTypes.oneOf(["left", "center", "right"]),
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  th: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
  td: PropTypes.oneOfType([
    PropTypes.element, PropTypes.func, PropTypes.oneOf([
      "int", "float", "percent", "changeRate"
    ])
  ]),
};

const defaultProps = {
  align: "left",
};

function Column() {
  return null;
}

Column.propTypes = propTypes;
Column.defaultProps = defaultProps;

export default Column;

代碼中可以發(fā)現(xiàn) th 可以接收兩種格式，一種是 function，一種是 ReactElement。這里提供 ReactElement 類(lèi)型的 th 主要讓大家能夠設(shè)置一些額外的 props，后面我們會(huì)給出一個(gè)例子。

td 的類(lèi)型就更復(fù)雜了，不僅能夠接收 function 和 ReactElement 這兩種類(lèi)型，還有 int, float, percent, changeRate 這三種類(lèi)型是最常用的數(shù)據(jù)類(lèi)型，這樣方便我們可以在 Table 里面根據(jù)類(lèi)型對(duì)數(shù)據(jù)做格式化，省去了項(xiàng)目成員中很多重復(fù)的代碼。

下面我們看一下 Table 的實(shí)現(xiàn)：

const getDisplayName = (el) => {
  return el && el.type && (el.type.displayName || el.type.name);
};

const renderChangeRate = (changeRate) => { ... };

const renderThs = (columns) => {
  return columns.map((col, index) => {
    const { name, dataKey, th } = col.props;
    const props = { name, dataKey, colIndex: index };
    let content;
    let className;

    if (React.isValidElement(th)) {
      content = React.cloneElement(th, props);
      className = getDisplayName(th);
    } else if (_.isFunction(th)) {
      content = th(props);
    } else {
      content = name || "";
    }

    return (
      
        {content}
      
    );
  });
};

const renderTds = (data, entry, columns, rowIndex) => {
  return columns.map((col, index) => {
    const { dataKey, td } = col.props;
    const value = getValueOfTd(entry, dataKey);
    const props = { data, rowData: entry, tdValue: value, dataKey, rowIndex, colIndex: index };

    let content;
    let className;
    if (React.isValidElement(td)) {
      content = React.cloneElement(td, props);
      className = getDisplayName(td);
    } else if (td === "changeRate") {
      content = renderChangeRate(value || "");
    } else if (_.isFunction(td)) {
      content = td(props);
    } else {
      content = formatIndex(parseValueOfTd(value), dataKey, td);
    }

    return (
      
        {content}
      
    );
  });
};

const renderRows = (data, columns) => {
  if (!data || !data.length) {return null;}

  return data.map((entry, index) => {
    return (
      
        {renderTds(data, entry, columns, index)}
      
    );
  });
};

function Table(props) {
  const { children, data, className } = props;
  const columns = findChildrenByType(children, Column);

  return (
    

      
        {hasNames(columns) && (
          
              {renderThs(columns)}
            
        )}
        {renderRows(data, columns)}
    
  );
}

代碼說(shuō)明了一切，就不再詳細(xì)說(shuō)了。當(dāng)然，在業(yè)務(wù)組件里，還可以加上公共的錯(cuò)誤處理邏輯。

前面提到我們的 td 和 th 還可以接收 ReactElement 格式的 props，大家可能還有會(huì)有點(diǎn)疑惑，下面我們看一個(gè) SortableTh 的例子：

class SortableTh extends Component {
 static displayName = "SortableTh";

 static propTypes = {
    ...,
    initialOrder: PropTypes.oneOf(["asc", "desc"]),
    order: PropTypes.oneOf(["asc", "desc", "none"]).isRequired,
    onChange: PropTypes.func.isRequired,
 };

 static defaultProps = {
   order: "none",
   initialOrder: "desc",
 };

 onClick = () => {
   const { onChange, initialOrder, order, dataKey } = this.props;

   if (dataKey) {
     let nextOrder = "none";

     if (order === "none") {
       nextOrder = initialOrder;
     } else if (order === "desc") {
       nextOrder = "asc";
     } else if (order === "asc") {
       nextOrder = "desc";
     }

     onChange({ orderBy: dataKey, order: nextOrder });
   }
 };

 render() {
   const { name, order, hasRate, rateType } = this.props;

   return (
     

       {name}
       
     
   );
 }
}

通過(guò)這個(gè)例子可以看到，th 和 td 接收 ReactElement 類(lèi)型的 props 能夠讓外部很好的控制單元格的內(nèi)容，每個(gè)單元格不只是接收 data 數(shù)據(jù)的封閉單元。

總結(jié)一些自己的感想：

前端工程師也需要往前走一步，了解用戶習(xí)慣。在寫(xiě)這個(gè)組件之前，我一直是用 ul 來(lái)寫(xiě)表格的，用 ul 寫(xiě)的表格調(diào)整樣式比較便利，后來(lái)發(fā)現(xiàn)用戶很多時(shí)候喜歡把整個(gè)表格里面的內(nèi)容 copy 下來(lái)用于存檔。然而，ul 寫(xiě)的表格 copy 后粘貼在 excel 中，整行的內(nèi)容都在一個(gè)單元格里面，用 table 寫(xiě)的表格則能夠幾乎保持原本的格式，所以我們這次用了原生的 table 來(lái)寫(xiě)表格。

業(yè)務(wù)代碼中組件抽取的粒度一直是一個(gè)比較糾結(jié)的問(wèn)題。粒度太粗，項(xiàng)目成員之間需要寫(xiě)很多重復(fù)的代碼。粒度太細(xì)，后續(xù)可擴(kuò)展性又很低，所以只能是大家根據(jù)業(yè)務(wù)特點(diǎn)來(lái)評(píng)估了。像 Table 這樣的組件非常通用，而且后續(xù)肯定有新的類(lèi)型冒出來(lái)，所以粒度不宜太細(xì)。當(dāng)然，我們這樣寫(xiě) Table 組件后，大家可以抽取常用的一些 XXXTh 和 XXXTd。

最終，我把這次 Table 組件的經(jīng)驗(yàn)抽離出來(lái)，開(kāi)源到 https://github.com/recharts/react-smart-table，希望開(kāi)發(fā)者們可以參考。