前端 - React中想要对父组件传递子组件，请问是以哪种方式传递呢？

Question

想要对一个父组件传递子组件：

传递children的时候：
是通过props 属性传递

function Home() {
  return (
    <React.Fragment>
      <BaseLayout>
        <AdminLayout children={...}></AdminLayout>
      </BaseLayout>
    </React.Fragment>

  );
};

还是通过组件的嵌套传递呢：

function Home() {
  return (
    <React.Fragment>
      <BaseLayout>
        <AdminLayout>
          <comp1></comp1>
          <comp2></comp2>
          <comp3></comp3>
        </AdminLayout>
      </BaseLayout>
    </React.Fragment>

  );
};

Answer 1

用第二种方法，把子组件嵌套在父组件里：

function Home() {
  return (
    <React.Fragment>
      <BaseLayout>
        <AdminLayout>
          <Comp1></Comp1>
          <Comp2></Comp2>
          <Comp3></Comp3>
        </AdminLayout>
      </BaseLayout>
    </React.Fragment>
  );
};

AdminLayout ：

function AdminLayout(props) {
  return (
    <div className="admin-layout">
      {/* 其他布局代码 */}
      {props.children} {/* 渲染子组件 */}
    </div>
  );
}

Answer 2

使用children属性也不会有问题，但是推荐使用第二种，比较直观，也符合大家在传递children时的一贯写法