Departments = const [ { ID: . 1 , name: 'process and the information management center' , Level: '0.1' , the parent_id: 0 , SEQ: . 1 , the mtime: '2019-03-02 16:20:10' , the ctime: '2019-03-02 16:20:10' , muser_id: 12 is , cuser_id: 10 }, { ID: 2 , name: 'architecture and process management unit' , Level: '0.1' , the parent_id: '2019-03-02 16:20:10 ' ,. 1 , SEQ: . 1 , the mtime: '2019-03-02 16:20:10' , the ctime: '2019-03-02 16:20:10' , muser_id: 12 is , cuser_id: 10 }, { ID: . 3 , name: 'process management support group' , Level: '0.1.2' , the parent_id: 2 , SEQ: . 1 , the mtime: '2019-03-02 16:20:10' , the ctime: muser_id: 12 is , cuser_id: 10 }, { ID: . 4 , name: 'process management group' , Level: '0.1.2' , the parent_id: 2 , SEQ: 2 , the mtime: '2019-03-02 16:20: 10 ' , the ctime: "2019-03-02 16:20:10" , muser_id: 12 is , cuser_id: 10 }, { ID: . 5 , name: ' data technology platform portion ' , level:'0.1', parent_id:1, seq:3, mtime:'2019-03-02 16:20:10', ctime:'2019-03-02 16:20:10', muser_id:12, cuser_id:10 }, { id:6, name:'软件开发组', level:'0.1.5', parent_id:5, seq:1, mtime:'2019-03-02 16:20:10', ctime:'2019-03-02 16:20:10', muser_id:12, cuser_id:10 }, { ID: . 7 , name: 'application integration group' , Level: '0.1.5' , the parent_id: . 5 , SEQ: 2 , the mtime: '2019-03-02 16:20:10' , the ctime: ' 16:20:10 2019-03-02 ' , muser_id: 12 is , cuser_id: 10 }, { ID: 8, name: ' data management group ' , Level: ' 0.1.5 ' , the parent_id: . 5, seq:3, mtime:'2019-03-02 16:20:10', ctime:'2019-03-02 16:20:10', muser_id:12, cuser_id:10 }, ] constructTree=(arr)=>{ let result = [] if(!Array.isArray(arr)) { return result } arr.forEach(item => { delete item.children; }); let map = {}; arr.forEach(item => { Map [item.id] = Item; }); arr.forEach (Item => { the let parent = Map [item.parent_id]; IF (parent) { (parent.children || (parent.children = [])) .push (Item); } the else { result.push (Item); } }); let theArr= []; // object into an array, to facilitate the subsequent operations for (the let Key in Map) { IF (Map [Key] == undefined || .children Map [Key] .parent_id = 0! ) { Delete Map [Key]; } the else { theArr.push (Map [Key]); } } return theArr; }
renderTreeNodes = data => data.map(item => { if (item.children) { return ( <TreeNode title={item.name} key={item.id} dataRef={item}> {this.renderTreeNodes(item.children)} </TreeNode> ); } return ( <TreeNode title={item.name} key={item.id} dataRef={item} /> ); }); render(){
const departmentTree=this.constructTree(departments);
return ( // ant design tree control, ant design details can see the official website < Tree onExpand = { the this .onExpand} expandedKeys = { the this .state.expandedKeys} autoExpandParent = { the this .state.autoExpandParent} the onSelect = { the this .onSelect } the selectedKeys = { the this .state.selectedKeys} the onSelect = { the this .onSelect} > { the this.renderTreeNodes(departmentTree)} </Tree> ) }
The final results: