如何使用React Antd库递归构建树状目录交互功能？

本文共计1560个文字，预计阅读时间需要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属性中去。那么，递归就来了。