如何在React中迭代渲染无限层级的树形结构

你已经通过递归方式实现了树形结构的渲染，下面提供两种迭代渲染方案，直接基于你的原始树形结构生成React元素，无需先扁平化再重构。

方案一：基于栈的深度优先遍历（与递归逻辑完全一致） #

递归本质是利用调用栈实现深度优先遍历，我们可以手动用栈模拟这个过程，同时记录每个节点的层级来计算缩进：

const getTreeIteratively = (nodes: any[]) => {
  if (!nodes?.length) return null;

  const elements: JSX.Element[] = [];
  // 栈中存储节点和对应的层级信息
  const stack = nodes.map(node => ({ node, level: 1 }));

  while (stack.length > 0) {
    const { node, level } = stack.pop()!;
    // 根据层级计算缩进，和递归保持相同的间距规则
    const marginLeft = `${level * 15}px`;

    // 创建当前节点的DOM元素
    const nodeEl = (
      <div key={node.name} style={{ textAlign: "left", marginLeft }}>
        <div>***{node.name}</div>
      </div>
    );
    elements.push(nodeEl);

    // 子节点入栈前反转顺序，保证渲染顺序和递归一致（栈是后进先出）
    if (node.children?.length) {
      [...node.children].reverse().forEach(child => {
        stack.push({ node: child, level: level + 1 });
      });
    }
  }

  // 栈处理会反转根节点顺序，最后恢复正确排序
  return elements.reverse();
};

// 组件中调用
return <> {getTreeIteratively(nodes)} </>;

关键逻辑说明 #

• 栈初始化：将所有根节点和初始层级（1）推入栈中
• 循环处理栈元素：弹出栈顶节点，生成对应React元素，计算层级对应的左边距
• 子节点入栈：反转子节点数组后入栈，避免因栈的后进先出特性打乱子节点的渲染顺序
• 恢复顺序：最后反转元素数组，修正栈处理导致的根节点顺序颠倒问题

方案二：基于队列的广度优先遍历（可选） #

如果需要按层级从上到下、从左到右渲染（与递归的深度优先逻辑不同），可以用队列实现广度优先遍历：

const getTreeBFS = (nodes: any[]) => {
  if (!nodes?.length) return null;

  const elements: JSX.Element[] = [];
  const queue = nodes.map(node => ({ node, level: 1 }));

  while (queue.length > 0) {
    const { node, level } = queue.shift()!;
    const marginLeft = `${level * 15}px`;

    const nodeEl = (
      <div key={node.name} style={{ textAlign: "left", marginLeft }}>
        <div>***{node.name}</div>
      </div>
    );
    elements.push(nodeEl);

    if (node.children?.length) {
      node.children.forEach(child => {
        queue.push({ node: child, level: level + 1 });
      });
    }
  }

  return elements;
};

效果对比 #

• 深度优先（栈方案）的渲染效果和你已实现的递归完全一致
• 广度优先（队列方案）会先渲染完同一层级的所有节点，再渲染下一层级

关于扁平化数组的补充 #

你之前尝试的扁平化数组重构树形结构的方法，本质是将扁平数据转换为嵌套结构，之后依然可以用上面的迭代渲染方案处理转换后的嵌套结构，无需额外修改渲染逻辑。

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