如何递归渲染返回div的函数数组，实现组件层级嵌套？

要实现将组件数组按顺序嵌套，让前一个组件的容器成为后一个组件的父容器，核心是利用递归每次处理数组的一个元素，并将剩余元素递归嵌套到当前容器中。

实现代码 #

首先保留你原有的组件定义，再编写负责递归嵌套的容器组件：

// 原组件保持不变
const One = () => <div>One</div>;
const Two = () => <div>Two</div>;
const Three = () => <div>Three</div>;

const arr = [One, Two, Three];

// 递归嵌套组件
const NestedContainer = ({ components }) => {
  // 递归渲染函数
  const renderNested = ([currentComp, ...restComps]) => {
    // 终止条件：无剩余组件时返回null
    if (!currentComp) return null;
    
    return (
      <div className="App-box">
        {/* 渲染当前组件 */}
        <currentComp />
        {/* 递归处理剩余组件，作为当前容器的子元素 */}
        {renderNested(restComps)}
      </div>
    );
  };

  return renderNested(components);
};

// 使用方式
// <NestedContainer components={arr} />

逻辑解释 #

1. 递归终止条件：当传入的组件数组为空（currentComp不存在）时，返回null，停止递归。
2. 单次递归操作：
   • 用ES6数组解构取出当前要渲染的第一个组件currentComp，以及剩余的组件数组restComps。
   • 将当前组件包裹在带有App-box类的div中，再在该div内部递归调用renderNested处理剩余组件。
3. 嵌套效果：第一次递归处理One，并将[Two, Three]传入下一层；第二层处理Two，将[Three]传入下一层；第三层处理Three，剩余数组为空，递归终止。最终生成的DOM结构完全符合需求。

匹配目标HTML的调整 #

如果希望App-box容器内直接显示文本（而非嵌套一层div），可以修改原组件让它们直接返回文本节点：

const One = () => "One";
const Two = () => "Two";
const Three = () => "Three";

这样渲染后的结构就和你给出的目标HTML完全一致。

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