React中如何将组件作为子元素嵌套？组件嵌套异常求助

问题原因 #

当前写法里，<FormTemplate />未传入任何children，FormRender只是将模板和section分别独立渲染，导致section出现在模板外部，不符合预期输出。

解决方案1：通过React.cloneElement修改FormRender #

利用React.cloneElement克隆传入的formTemplate元素，把formSection作为它的children传入：

import "./styles.css";
import React from "react";

function FormTemplate({ children }) {
  return (
    <>
      <div>Form Template</div>
      <div>{children}</div>
      <div>Form Template End</div>
    </>
  );
}

function FormRender({ formTemplate, formSection }) {
  // 克隆formTemplate并传入children
  return React.cloneElement(formTemplate, {
    children: formSection
  });
}

export default function App() {
  return (
    <div>
      <FormRender
        formTemplate={<FormTemplate />}
        formSection={<section>section</section>}
      />
    </div>
  );
}

解决方案2：直接在App中传递children给FormTemplate #

在App组件里，直接把formSection作为FormTemplate的children，再传给FormRender的formTemplate属性：

import "./styles.css";

function FormTemplate({ children }) {
  return (
    <>
      <div>Form Template</div>
      <div>{children}</div>
      <div>Form Template End</div>
    </>
  );
}

function FormRender({ formTemplate }) {
  return formTemplate;
}

export default function App() {
  return (
    <div>
      <FormRender
        formTemplate={<FormTemplate><section>section</section></FormTemplate>}
      />
    </div>
  );
}

两种方案均可实现预期输出，第一种适合需要在FormRender中统一处理模板与内容的场景，第二种写法更直接简洁。

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