【JavaScript】普通数组，改写成AntdTree树状结构

本文链接：https://blog.youkuaiyun.com/Principal_Z/article/details/135625037

本文介绍了如何将给定的原始数据结构转换成树形数据结构，通过`rewriteTreeData`函数递归处理，以更好地组织和展示层级关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原数据结构：
const originData = [
    {
        "key": "100010",
        "parentKey": "1001",
        "title": "叶子文件夹",
    },
    {
        "key": "1003",
        "parentKey": "1000",
        "title": "3号文件夹",
    },
    {
        "key": "1002",
        "parentKey": "1000",
        "title": "2号文件夹",
    },
    {
        "key": "1001",
        "parentKey": "1000",
        "title": "1号文件夹",
    },
    {
        "key": "1000",
        "parentKey": 0,
        "title": "全部文件夹",
    }
];

转换成Tree的数据结构
const newData = [
  {
    title: "全部文件夹",
    key: "1000",
    parentKey: 0,
    children: [
      {
        key: "1001",
        parentKey: "1000",
        title: "1号文件夹",
        children: [
          {
            id: "10010",
            parentKey: "1001",
            title: "叶子文件夹",
          },
        ],
      },
      {
        key: "1002",
        parentKey: "1000",
        title: "2号文件夹",
      },
      {
        key: "1003",
        parentKey: "1000",
        title: "3号文件夹",
      },
    ],
  },
];

export const rewriteTreeData = (list: any, key: number | string, pKey?: string) =>
  list
    .filter((item: any) => item[pKey] === key)
    .map((item: any) => {
      const newData = { ...item };
      const newChildren = rewriteTreeData(list, item.key, pKey);
      if (newChildren?.length) {
        newData.children = newChildren;
      }
      return newArray
    });

const TreeData = rewriteTreeData(originData, 0, 'parentKey');

<Tree treeData={TreeData} />