如何递归遍历React Flow中不确定层级的嵌套节点结构

问题背景 #

在React Flow场景下，需要遍历嵌套节点数据结构，递归处理每个节点的子节点及其后续层级，为所有关联边设置样式。现有基于循环+while的遍历逻辑存在无法回溯、部分子节点遍历不全的问题（如节点sandbox_university-i_courses的id字段关联多个子节点时无法完整遍历）。

现有代码问题 #

原代码通过嵌套for循环和while循环模拟递归，但变量复用导致上下文丢失，无法处理分支节点的回溯逻辑。当一个字段包含多个子节点时，后续子节点的遍历会覆盖前序上下文，导致遍历不完整。

改进后的递归实现 #

使用递归函数可天然处理回溯逻辑，完整遍历所有层级的子节点：

// 递归遍历子节点的核心函数
const traverseChildNodes = (child) => {
  // 构建目标节点ID和字段名
  const childTargetNodeId = `${child.child_database}-${child.child_table}`;
  const childTargetFieldName = child.child_field;

  // 查找目标节点，不存在则终止当前分支
  const targetNode = get().nodes.find(node => node.id === childTargetNodeId);
  if (!targetNode) return;

  // 查找目标字段，不存在则终止当前分支
  const targetField = targetNode.data.fields.find(field => field.name === childTargetFieldName);
  if (!targetField) return;

  // 为当前边设置样式（你已掌握实现逻辑，此处留TODO）
  // TODO: 利用child.child_edge获取边ID，执行样式设置操作

  // 递归遍历当前字段的所有子节点
  if (targetField.children?.length) {
    targetField.children.forEach(subChild => {
      traverseChildNodes(subChild);
    });
  }
};

// 启动遍历：处理原始节点的所有子节点
origin_node_children.forEach(child => {
  traverseChildNodes(child);
});

代码说明 #

• 递归逻辑：traverseChildNodes函数接收单个子节点对象，处理当前层级后自动递归调用自身处理子节点，天然实现回溯，无需手动管理上下文。
• 安全校验：添加节点和字段的存在性判断，避免数据缺失导致的运行时错误。
• 多分支处理：通过forEach循环依次处理每个子节点，每个分支的上下文独立，不会出现覆盖问题，确保所有子节点都被遍历。

优势 #

• 完整覆盖所有层级的子节点，包括多分支场景。
• 逻辑清晰简洁，易于维护和扩展。
• 自动处理回溯，无需手动编写复杂的循环控制逻辑。

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