如何将服务端树形对象转换为Ant Design Tree的TreeNode结构？

要搞定服务端树形数据转Ant Design Tree所需的TreeNode结构，递归遍历是最适合的方案，能完美处理深度嵌套节点和同级节点。下面是具体实现：

转换函数实现 #

// 转换根节点集合为Tree组件所需结构
function convertToTreeNodes(sourceTree) {
  return Object.entries(sourceTree).map(([nodeKey, nodeData]) => {
    // 根节点title规则：parent为null用自身key，否则用parent字段
    const title = nodeData.parent === null ? nodeKey : nodeData.parent;
    const children = transformChildren(nodeData.children);

    return {
      title,
      key: nodeKey,
      ...(children.length > 0 && { children })
    };
  });
}

// 递归处理子节点层
function transformChildren(childrenObj) {
  if (!childrenObj || Object.keys(childrenObj).length === 0) {
    return [];
  }

  return Object.entries(childrenObj).map(([nodeKey, nodeData]) => {
    const title = nodeData.name;
    const children = transformChildren(nodeData.children);
    const isLeaf = children.length === 0;

    return {
      title,
      key: nodeKey,
      ...(isLeaf && { isLeaf }),
      ...(children.length > 0 && { children })
    };
  });
}

// 调用示例
const treeData = convertToTreeNodes(dataTree.tree);

代码关键点说明 #

• 递归深度遍历：transformChildren会逐层递归处理所有子节点，不管嵌套多少层都能覆盖
• 根节点规则适配：根节点没有name字段，所以title优先取parent值，parent为null时用自身唯一键
• 子节点规则适配：子节点title直接取name字段，key用节点自身的唯一标识
• 叶子节点标记：当节点没有子节点时自动添加isLeaf: true
• 同级节点处理：通过Object.entries遍历对象键值对，自动处理所有同级节点，不会遗漏

验证结果 #

将给定的dataTree.tree传入convertToTreeNodes函数，得到的结果完全符合预期输出，包括各级节点的title、key，以及叶子节点的isLeaf标记。

内容的提问来源于stack exchange，提问作者softone-as