記錄工作中React antdesign Tree元件實現時序圖的思路，及碰到的問題

genetalks_大資料發表於2019-04-01
React元件時序圖

簡介

"時序圖"-->先簡單解釋一下，突然接到任務要求做一個時序圖（後面會附上參考圖片），由於需求不是很完善，設計也還沒給出圖紙，暫時就先做一個滿足基本功能的demo。

需求整理：

  1. 預設顯示主任務，主任務下有N個子任務，需要檢視子任務的執行狀態時再載入子任務。
  2. 只有所有的子任務都結束了，主任務才顯示完成狀態，主任務的執行時間是變化的（開始時間可以確定），子任務可以是並行、序列啟動。
  3. 以不同的顏色區分子任務所佔主任務的比例。
  4. 每個主任務的執行時間是不同的，所以表示執行時間的刻度是變化的。（不太理解的話，可以觀看下面的參考圖）。

暫時的需求整理結束，下面來看看實現上遇到的一些問題，及解決方法。 注：本文使用的是React + ts，UI元件庫使用的是andtesign.

先看參考圖，瞭解一下大概是要做一個怎樣的效果。

記錄工作中React antdesign Tree元件實現時序圖的思路，及碰到的問題

分析：

  1. 從上面這張圖片可以看出，左側是一個樹形結構，比較開心，因為antd裡有類似的元件，我們可以從Tree元件上著手。
  2. table head 是延遲時間。（對應我們需求整理的第四點的時間刻度）。
  3. 右側是一個用進度條的形式顯示對應的延時時間。細心的話會發現進度條的顏色是有區分的。

時序圖的table head執行時刻計算，刻度為4

判斷一個主任務的時刻步長：

step = (主任務結束時間 - 主任務開始時間)/3
複製程式碼

使用Tree做我們時序圖

注： 實現的程式碼有點長，全部貼出來的話閱讀會比較困難，所以我會貼出一些重要的部分，以及遇到問題的部分。

按照antd給出的示例去引入Tree元件，然後給引數新增型別。


public renderTree = () => {
  return (
    // (JSX attribute) loadData?: ((node: AntTreeNode) => PromiseLike<any>) | undefined
    <Tree className="tree-box" loadData={this.onLoadData}>
      {this.renderTreeNodes(this.state.treeData)}
    </Tree>
  );
}
複製程式碼

使用TreeNodes載入資料的話，ts裡會遇到一個這樣的報錯提示:

AntTreeNode上不存在dataRef，這時我選擇去Tree.d.ts裡面的AntTreeNodeProps介面裡自己定義一個

dataRef: Partial<{children?: React.ReactNode}>;
複製程式碼

在我們的元件裡還需要這樣去定義：

interface IRef extends AntTreeNodeProps{
  dataRef: Partial<{children?: React.ReactNode}>;
}
// 因為我們的TreedNode是一個元件型別，我們需要在元件上注入dataRef這樣在使用TreeNode時就不會有錯誤提示了
const TreeNode = Tree.TreeNode as React.ComponentClass<IRef>;
複製程式碼

這裡算是antd對ts寫作支援的一個遺漏。好了ts的問題就到這裡。

使用TreeNode時我們發現他的Title屬性支援ReactNode，那麼我們的進度條可以利用這個屬性去顯示。進度條的位置可以利用子任務的開始時間去判斷。

子任務進度條的長度：

(子任務結束時間 - 子任務開始時間) / (主任務結束時間 - 主任務開始時間)  * (螢幕寬度 - Tree title文字部分的寬度)
複製程式碼

子任務進度條的顏色通過子任務所佔主任務長度的多少來判斷子任務的顏色變化。

展示一下只實現基礎功能的時序圖

記錄工作中React antdesign Tree元件實現時序圖的思路，及碰到的問題

作者資訊：寧文飛，人和未來大資料前端工程師

相關文章