如何将带点分隔属性的对象数组转为Ant Design Tree树形结构？

假设你的原始数据是类似这样的数组：

const rawPaths = [
  "Baseline.name.first",
  "Baseline.name.second",
  "Baseline.config",
  "Other.setting.theme"
];

你可以通过以下步骤将其转换为Ant Design Tree所需的嵌套结构：

1. 构建节点映射表，用于快速查找已创建的节点，避免重复创建
2. 遍历每个路径字符串，拆分层级后逐层创建/关联节点
3. 最后提取根节点生成目标结构

具体实现代码：

function buildAntdTree(rawPaths) {
  // 节点映射表，key为节点的完整路径（如"Baseline"、"Baseline.name"），value为对应的节点对象
  const nodeMap = new Map();
  // 根节点集合，最终返回的数组
  const rootNodes = [];

  rawPaths.forEach(path => {
    const levels = path.split('.');
    let parentKey = '';
    let currentPath = '';

    levels.forEach((level, index) => {
      currentPath = parentKey ? `${parentKey}.${level}` : level;
      
      // 如果当前路径的节点不存在，创建新节点
      if (!nodeMap.has(currentPath)) {
        const node = {
          title: level,
          key: currentPath, // 用完整路径确保key唯一，也可自定义规则
          children: []
        };

        nodeMap.set(currentPath, node);

        // 根节点直接加入根集合
        if (index === 0) {
          rootNodes.push(node);
        } else {
          // 关联到父节点的children数组
          const parentNode = nodeMap.get(parentKey);
          parentNode.children.push(node);
        }
      }

      parentKey = currentPath;
    });
  });

  return rootNodes;
}

// 测试示例
const rawPaths = [
  "Baseline.name.first",
  "Baseline.name.second",
  "Baseline.config",
  "Other.setting.theme"
];

const treeData = buildAntdTree(rawPaths);
console.log(treeData);

代码说明 #

• 节点映射表：用Map存储每个节点的完整路径与节点对象的对应关系，确保每个层级的节点只创建一次
• 路径拆分：将每个点分隔的路径拆分为层级数组，比如"Baseline.name.first"拆成["Baseline", "name", "first"]
• 节点创建逻辑：从根层级开始，依次检查每个层级的节点是否存在，不存在则创建，并关联到父节点的children中
• Key的设置：这里用节点的完整路径作为key，确保在Ant Design Tree中唯一，你也可以根据需求自定义key规则（比如用UUID或其他唯一标识）

运行上述代码后，得到的treeData就可以直接传入Ant Design Tree组件的treeData属性使用。

内容的提问来源于stack exchange，提问作者Jozef Müller