将一个数组展为树形结构的数据并将其展示在页面上

const departments=[
    {
        id:1,
        name:'流程与信息管理中心',
        level:'0.1', 
        parent_id:0,
        seq:1,
        mtime:'2019-03-02 16:20:10',
        ctime:'2019-03-02 16:20:10',
        muser_id:12,
        cuser_id:10
    },
    {
        id:2,
        name:'架构与流程管理部',
        level:'0.1', 
        parent_id:1,
        seq:1,
        mtime:'2019-03-02 16:20:10',
        ctime:'2019-03-02 16:20:10',
        muser_id:12,
        cuser_id:10
    },
    {
        id:3,
        name:'流程管理支持组',
        level:'0.1.2', 
        parent_id:2,
        seq:1,
        mtime:'2019-03-02 16:20:10',
        ctime:'2019-03-02 16:20:10',
        muser_id:12,
        cuser_id:10
    },
    {
        id:4,
        name:'流程管理组',
        level:'0.1.2', 
        parent_id:2,
        seq:2,
        mtime:'2019-03-02 16:20:10',
        ctime:'2019-03-02 16:20:10',
        muser_id:12,
        cuser_id:10
    },
    {
        id:5,
        name:'数据与技术平台部',
        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:'应用集成组',
        level:'0.1.5', 
        parent_id:5,
        seq:2,
        mtime:'2019-03-02 16:20:10',
        ctime:'2019-03-02 16:20:10',
        muser_id:12,
        cuser_id:10
    },
    {
        id:8,
        name:'数据管理组',
        level:'0.1.5', 
        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 => {
            let parent = map[item.parent_id];
            if(parent) {
                (parent.children || (parent.children = [])).push(item);
            } else {
                result.push(item);
            }
        });
        let theArr=[]; //将对象转为数组，方便后续的操作
        for(let key in map){
            if(map[key].children==undefined||map[key].parent_id!=0){
                delete map[key];
            }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的树形控件，详情可以查看ant design官网
    <Tree
                    onExpand={this.onExpand}
                    expandedKeys={this.state.expandedKeys}
                    autoExpandParent={this.state.autoExpandParent}
                    onSelect={this.onSelect}
                    selectedKeys={this.state.selectedKeys}
                    onSelect={this.onSelect}
                >
                   {this.renderTreeNodes(departmentTree)}
     </Tree>
                
  )
}

 最后的效果：