前端元件庫X-Design，開發Tree元件

附言：

個人的使用React開發的元件庫X-Design已開源，麻煩大家去X-Design：使用React開發的UI元件庫點個star，在此謝謝大家。

X-Design已開發的元件有：

X-Design元件庫

X-Design元件介面截圖：

X-Design元件介面截圖

Tree元件，即就是樹元件，開發樹元件的難點是什麼：是如何構建子樹，其實很容易想到用遞迴構建子樹。

使用Tree元件的樣子：

import Tree from ‘。。/。。/components/Tree’const data = ［ { label： ‘節點1’， val： ‘node-1’， }， { label： ‘節點2’， val： ‘node-2’， children：［ { label： ‘節點2-1’， val： ‘node-2-1’， }， { label： ‘節點2-2’， val： ‘node-2-2’， }，］ }， { label： ‘節點3’， val： ‘node-3’， children：［ { label： ‘節點3-1’， val： ‘node-3-1’， children：［ { label： ‘節點3-1-1’， val： ‘node-3-1-1’， }， { label： ‘節點3-1-2’， val： ‘node-3-1-2’， }，］ }，］ }，］const MyTree = （） => { const handleChange = （val， label， isSelected） => { console。log（val， label， isSelected）； } return

}export default MyTree

有些引數解釋一下

：

treeData

代表的就是節點樹資料，

showCheckbox

代表節點名稱前面是否顯示覆選框，

onChange

代表的是點選節點的事件。其他引數和功能後續完善。

Tree元件：

沒有複選框的樣子：

Tree元件

有複選框的樣子：

帶複選框的樹元件

樹元件程式碼：

import { useState， useMemo， Fragment } from ‘react’import DownTriangle from ‘。。/Icons/DownTriangleIcon’import RightTriangle from ‘。。/Icons/RightTriangleIcon’import ‘。/index。css’const Tree = （props） => { const ［treeData， setTreeData］ = useState（props。treeData || ［］） const handleInitTreeData = （data， field， type， node） => { let arr = ［］ function loop（data） { return data。map（item => { if（type === ‘init’） { item［field］ = false } else if（type === ‘update’ && node。val === item。val） { item［field］ = ！item［field］ } if（item。children && Array。isArray（item。children）） { item。children = loop（item。children） } return item }） } arr = loop（［。。。data］） return arr } const tempData = useMemo（（） => { return handleInitTreeData（［。。。props。treeData］， ‘isSelected’， ‘init’） }，［props。treeData］） const clickTreeNode = （node） => { let arr = ［］ arr = handleInitTreeData（［。。。treeData］， ‘isSelected’， ‘update’， node） setTreeData（arr） props。onChange && props。onChange（node。val， node。label， node。isSelected） } const renderTree = （treeDataArr） => { let arr = ［］ function loop（data， level） { return data。map（item => { let newLevel = level + 1 return {clickTreeNode（item）}} > { （item。children && item。children。length > 0）？（item。isSelected ？：）： } { props。showCheckbox ？： null } { item。label } { item。isSelected ？

{ item。children ？ loop（item。children， newLevel）： null }

： null } }） } arr = loop（［。。。treeDataArr］， 0） return arr } return

{ renderTree（tempData） }

}export default Tree

index.css檔案：

。tree-container {}。tree-node-label { display： flex； cursor： pointer；}。tree-node-label：hover { color： #00d5ff；}。tree-node-label-left-empty { display： inline-block； width： 16px； height： 16px；}

在Tree元件裡

renderTree

函式是重點，renderTree是構建樹結構的函式，使用了遞迴，

level

引數是標明樹在第幾層，利用

newLevel

設定每個節點距離左邊的padding距離，以構建出樹狀。

目前寫的功能能夠滿足基本功能，後續在完善其它功能。

未完，待續。。。