react+antd 递归实现树状目录

1.写在前面

作为前端小白的我一直对算法和数据结构浅尝辄止，哝，吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的，分享一下我这次挠头的经历~

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则先套上,再对他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树形中添加树的自定义元素，可以，很强势，官方文档，看就完了，哈哈。