如何将react-flow-renderer关联节点数组转换为带children的树形结构？

你可以通过哈希映射+遍历连接关系的方式实现转换，代码如下：

// 入参为你的原始节点数组和连接关系数组
function convertToTree(array, connections) {
  // 建立id到节点的映射，同时初始化children字段
  const nodeMap = {}
  array.forEach(item => {
    nodeMap[item.id] = { ...item, children: [] }
  })

  // 遍历所有连接，组装父子关系
  connections.forEach(({ source, target }) => {
    if (nodeMap[source] && nodeMap[target]) {
      nodeMap[source].children.push(nodeMap[target])
    }
  })

  // 按你需要的输出格式，返回所有存在子节点的节点
  return Object.values(nodeMap).filter(node => node.children.length > 0)

  // 如果你需要标准嵌套树形结构（仅根节点在外层，无父节点的节点），替换上面的return为下面代码：
  // const allChildNodeIds = new Set(connections.map(item => item.target))
  // return Object.values(nodeMap).filter(node => !allChildNodeIds.has(node.id))
}

// 调用示例
const tree = convertToTree(array, connections)
console.log(tree)

该方案基于浅拷贝实现节点复用，修改任意节点的属性都会同步到所有引用位置，适配react-flow的节点状态管理逻辑。

内容的提问来源于stack exchange，提问作者Oussama Bouchikhi