antd树型选择控件选择父级_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({