如何用React Antd递归实现树状目录的疑问操作？

本文共计1551个文字，预计阅读时间需要7分钟。

1. 作为前端小白，我一开始对算法和数据结构浅尝辄止，唉，吃力了。多次使用递归实现数据格式化，最终将数据进行树状展示。

2.数据，后台传输。

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属性中去。那么，递归就来了。