如何将带路径的字典列表转换为适配AntD Dash树组件的嵌套树形结构？

核心思路 #

要把带path字段的扁平数据转成AntD树组件需要的嵌套结构，核心是理清每个节点的层级关系，下面给出两种可直接复用的实现方式：

方式一：高效映射表实现（推荐） #

这种方式比纯递归更高效，适合数据量较大的场景：

// 示例原始数据
const rawData = [
  { id: '1', name: 'A', path: 'A' },
  { id: '2', name: 'AA', path: 'A-AA' },
  { id: '3', name: 'AAA', path: 'A-AA-AAA' },
  { id: '4', name: 'B', path: 'B' },
  { id: '5', name: 'BB', path: 'B-BB' },
];

function convertToAntDTree(rawData, separator = '-') {
  // 1. 把所有节点转成AntD需要的结构，存入映射表（用id做键，快速查找）
  const nodeMap = {};
  rawData.forEach(item => {
    nodeMap[item.id] = {
      title: item.name,
      key: item.id,
      children: []
    };
  });

  const treeRoots = [];
  // 2. 遍历每个节点，找到父节点并加入其子列表
  rawData.forEach(item => {
    const pathSegments = item.path.split(separator);
    // 根节点：路径只有一段，直接加入根列表
    if (pathSegments.length === 1) {
      treeRoots.push(nodeMap[item.id]);
    } else {
      // 拼接父节点的path，找到对应的父节点条目
      const parentPath = pathSegments.slice(0, -1).join(separator);
      const parentNode = rawData.find(dataItem => dataItem.path === parentPath);
      // 找到父节点后，将当前节点加入父节点的children数组
      if (parentNode) {
        nodeMap[parentNode.id].children.push(nodeMap[item.id]);
      }
    }
  });

  return treeRoots;
}

// 调用后得到的结果可直接传入AntD树组件
const treeData = convertToAntDTree(rawData);

方式二：递归实现 #

如果更倾向于递归逻辑，这种方式代码更简洁：

function buildAntDTree(rawData, parentPath = '', separator = '-') {
  // 筛选当前父路径下的所有子节点
  const childNodes = rawData.filter(item => {
    const pathSegments = item.path.split(separator);
    // 节点的父路径 = 自身path去掉最后一段
    const nodeParentPath = pathSegments.slice(0, -1).join(separator);
    return nodeParentPath === parentPath;
  });

  // 递归生成每个节点的子树
  return childNodes.map(item => ({
    title: item.name,
    key: item.id,
    children: buildAntDTree(rawData, item.path, separator)
  }));
}

// 调用示例
const treeData = buildAntDTree(rawData);

注意事项 #

• 确保原始数据中每个层级的节点都存在，比如有A-AA-AAA，那A和AA必须在rawData里，否则子节点会因找不到父节点而丢失。
• 根据实际数据调整路径分隔符（比如有的用/，修改separator参数即可）。
• 用id作为key最稳妥，可避免重复key的报错。

内容的提问来源于stack exchange，提问作者Oliver Gordon