2.數據 后臺傳過來的數據大概是這樣的 { "data":[ { "id":1, "name":"一級節點", "parentId":0, "isValid":true, "canAddChild":true, "parent":null, "children":[] },{ "id":3, "name":"二級節點", "parentId":1, "isValid":true, "canAddChild":true, "parent":null, "children":[] } ], "status":1 } 3.數據格式 data里面每個元素的parentId指向是父級元素的id，parentId為0的是結構樹的頂級元素，但現在是個平面的數組不好處理，而我們要做的是樹狀的結構，所以首先要對數據進行格式化，將一個元素的所有子元素放到該元素的children屬性中去。那么，遞歸就來了。 createTree = data => { let treeArr = []; //獲取頂級父元素集合 let roots = data.filter(elemt => elemt.parentId === 0); treeArr.push(...roots); //從頂級元素開始，獲取每個元素的子元素放到該元素的children屬性中 const getChildren = (resultarr,data) => { resultarr.forEach((elemt,index) => { elemt.children = data.filter((item,index) => item.parentId === elemt.id); //判斷當前元素是不是有子元素被添加，如果有，再在子元素這一層循環 if(elemt.children.length > 0){ getChildren(elemt.children,data); } }); } getChildren(treeArr,data); //最后更新一下數據 this.setState({ treeArr }) } 4.組件格式 因為UI組件用的是antd，使用Tree和TreeNode做樹結構。因為數據已經是樹狀的了，而且深度我們不確定，想要按層級輸出UI控件，那么，遞歸又來了。 renderTree = jsonTree => jsonTree.map( value => { //遍歷樹狀數組，如果發現他有children則先套上<TreeNode>,再對他children中的元素做相同的操縱，直到children為空的元素停止，說明他們已經是最深的那一層了。 if(value.children){ return( <TreeNode title={ <span> {value.name} <Icon type="plus" onClick={this.showModal.bind(this,2,value.id)} /> <Icon type="edit" onClick={this.showModal.bind(this,1,value.id)} /> <Icon type="delete" onClick={this.showModal.bind(this,0,value.id)} /> </span> } key={value.id}> //對children中的每個元素進行遞歸 {this.renderTree(value.children)} </TreeNode> ) } }) 至此，就基本完成對數據的格式和對UI樹的格式啦，最后在樹控件中調用它，OK~ 5.瘋狂輸出 render(){ return( <Tree showLine={true}> {this.renderTree(this.state.treeArr)} </Tree> ) } 運行，Bingo~ tips 因為目錄樹的每一項都是可編輯的，而原始的UI組件也沒有可用配置，后來查閱文檔竟然應該在TreeNode的title樹形中添加樹的自定義元素，可以，很強勢，官方文檔，看就完了，哈哈。