Javascript 动态嵌套的React组件

我正在使用下面的代码，它完成了这项工作（目前）。根据阵列的长度，组件彼此嵌套，阵列元素引用作为道具。在最里面的元素中，必须始终注入另一个元素

const arr = ['one', 'two', 'three'];
const injectedContent = <SomeContent />;

const renderNestedSections = () => {
  switch (arr.length) {
    case 1:
      return (
        <Section name={arr[0]}>
          {injectedContent}
        <Section>
      );

    case 2:
      return (
        <Section name={arr[0]}>
          <Section name={arr[1]}>
            {injectedContent}
          </Section>
        </Section>
      );

    case 3:
      return (
        <Section name={arr[0]}>
          <Section name={arr[1]}>
            <Section name={arr[2]}>
              {injectedContent}
            </Section>
          </Section>
        </Section>
      );

    default:
      return null;
  }
}

const arr=['1'，'2'，'3']；
常量injectedContent=；
const renderNestedSections=（）=>{
开关（arr.length）{
案例1：
返回(
{injectedContent}
);
案例2：
返回(
{injectedContent}
);
案例3：
返回(
{injectedContent}
);
违约：
返回null；
}
}

---

我正在努力用动态嵌套的算法创建一个函数。任何帮助都将不胜感激。提前谢谢

我头上有点不对劲。也许有更好/更清晰的方法可以做到这一点，但想法是迭代数组中的每个项并向外构建，将每个部分包装到另一个部分中

为此，从注入内容的累加器值开始使用。然后，您只需向上构建最外面的部分。此外，由于我们是向外构建而不是向内构建，因此必须反转阵列（请记住，这将使阵列发生变异，因此您可能希望在执行此操作之前克隆阵列）

这里是一个使用DOM而不是React的概念证明

让arr=['1'，'2'，'3']
//内在内容
让内容=document.createElement（'div'）
content.innerHTML=“你好，世界”
//算法
让res=arr.reverse（）.reduce（（acc，item）=>{
设a=document.createElement（'div'）
a、 类列表。添加（项）
a、 儿童（acc）
归还
}，内容）
document.body.appendChild（res）

div{
填充：10px；
颜色：白色；
}
.一{
背景色：红色；
}
.二{
背景颜色：绿色；
}
.三{
背景颜色：蓝色；
}

我脑子里有个想法。也许有更好/更清晰的方法可以做到这一点，但想法是迭代数组中的每个项并向外构建，将每个部分包装到另一个部分中

为此，从注入内容的累加器值开始使用。然后，您只需向上构建最外面的部分。此外，由于我们是向外构建而不是向内构建，因此必须反转阵列（请记住，这将使阵列发生变异，因此您可能希望在执行此操作之前克隆阵列）

这里是一个使用DOM而不是React的概念证明

让arr=['1'，'2'，'3']
//内在内容
让内容=document.createElement（'div'）
content.innerHTML=“你好，世界”
//算法
让res=arr.reverse（）.reduce（（acc，item）=>{
设a=document.createElement（'div'）
a、 类列表。添加（项）
a、 儿童（acc）
归还
}，内容）
document.body.appendChild（res）

div{
填充：10px；
颜色：白色；
}
.一{
背景色：红色；
}
.二{
背景颜色：绿色；
}
.三{
背景颜色：蓝色；
}

您可以使用递归渲染方法，如

const arr = ["one", "two", "three", "four"];
const injectedContent = () => <SomeContent />;

const Section = ({ name, children }) => (
  <div>
    <div>{name}</div>
    {children}
  </div>
);

const SomeContent = () => <div>Some Content</div>;

const RecursiveContent = ({ InjectedContent, arr }) => {
  const name = arr[0];

  return (
    <Section arr={arr} name={name}>
      {arr.length > 0 ? (
        <RecursiveContent arr={arr.slice(1)} InjectedContent={InjectedContent} />
      ) : (
        <InjectedContent />
      )}
    </Section>
  );
};
const NestedSection = InjectedContent => ({ arr }) => (
  <RecursiveContent arr={arr} InjectedContent={InjectedContent} />
);

function App() {
  return (
    <div className="App">
      <NestedEle arr={arr} />
    </div>
  );
}

const NestedEle = NestedSection(injectedContent);

常量arr=[“一”、“二”、“三”、“四”]； 常量injectedContent=（）=>； 常量节=（{name，children}）=>( {name} {儿童} ); const SomeContent=（）=>一些内容； const RecursiveContent=（{InjectedContent，arr}）=>{ const name=arr[0]； 返回( {arr.length>0( ) : ( )} ); }; const NestedSection=InjectedContent=>（{arr}）=>( ); 函数App（）{ 返回( ); } const NestedEle=NestedSection（injectedContent）；

---

您可以使用递归渲染方法，如

const arr = ["one", "two", "three", "four"];
const injectedContent = () => <SomeContent />;

const Section = ({ name, children }) => (
  <div>
    <div>{name}</div>
    {children}
  </div>
);

const SomeContent = () => <div>Some Content</div>;

const RecursiveContent = ({ InjectedContent, arr }) => {
  const name = arr[0];

  return (
    <Section arr={arr} name={name}>
      {arr.length > 0 ? (
        <RecursiveContent arr={arr.slice(1)} InjectedContent={InjectedContent} />
      ) : (
        <InjectedContent />
      )}
    </Section>
  );
};
const NestedSection = InjectedContent => ({ arr }) => (
  <RecursiveContent arr={arr} InjectedContent={InjectedContent} />
);

function App() {
  return (
    <div className="App">
      <NestedEle arr={arr} />
    </div>
  );
}

const NestedEle = NestedSection(injectedContent);

常量arr=[“一”、“二”、“三”、“四”]； 常量injectedContent=（）=>； 常量节=（{name，children}）=>( {name} {儿童} ); const SomeContent=（）=>一些内容； const RecursiveContent=（{InjectedContent，arr}）=>{ const name=arr[0]； 返回( {arr.length>0( ) : ( )} ); }; const NestedSection=InjectedContent=>（{arr}）=>( ); 函数App（）{ 返回( ); } const NestedEle=NestedSection（injectedContent）；

---

这是一个递归的和声明的反应组件：

const RecursiveNodeWrapper = ({ layers, node }) => {
  let accumulatedNode = node;
  if (layers.length) {
    const [currentLayer, ...restLayers] = layers;
    accumulatedNode = (
      <section style={{ border: '1px solid', padding: 5 }} name={currentLayer}>
        {accumulatedNode}
      </section>
    );
    return RecursiveNodeWrapper({
      layers: restLayers,
      node: accumulatedNode,
    });
  }
  return accumulatedNode;
};

const RecursiveNodeWrapper=（{layers，node}）=>{
让累计节点=节点；
如果（层长度）{
const[currentLayer，…restLayers]=层；
累计节点=(
{累计节点}
);
返回递归nodewrapper({
层：restLayers，
节点：累加节点，
});
}
返回累加节点；
};

然后，您只需将其称为常规组件：

<RecursiveNodeWrapper layers={['one', 'two']} node={<h1>hello</h1>} />

---

这是一个递归的和声明的反应组件：

const RecursiveNodeWrapper = ({ layers, node }) => {
  let accumulatedNode = node;
  if (layers.length) {
    const [currentLayer, ...restLayers] = layers;
    accumulatedNode = (
      <section style={{ border: '1px solid', padding: 5 }} name={currentLayer}>
        {accumulatedNode}
      </section>
    );
    return RecursiveNodeWrapper({
      layers: restLayers,
      node: accumulatedNode,
    });
  }
  return accumulatedNode;
};

const RecursiveNodeWrapper=（{layers，node}）=>{
让累计节点=节点；
如果（层长度）{
const[currentLayer，…restLayers]=层；
累计节点=(
{累计节点}
);
返回递归nodewrapper({
层：restLayers，
节点：累加节点，
});
}
返回累加节点；
};

然后，您只需将其称为常规组件：

<RecursiveNodeWrapper layers={['one', 'two']} node={<h1>hello</h1>} />

我已经对它进行了测试，效果非常好。非常紧凑的解决方案，再次感谢！我已经测试过了，效果非常好。非常紧凑的解决方案，再次感谢！