如何在布局组件中插入内容组件

Question

export default function Layout({ prop, title, subTitle, item }) {
  return (
    <LayoutContainer>
      <LayoutMain>
        <MainRow>
          <MainSubTitle>{subTitle}</MainSubTitle>
          <MainTitle>{title}</MainTitle>
          <MainText>
            우리는 모두 모여 춤을 추지. Let's get it.
          </MainText>
        </MainRow>
      </LayoutMain>
      <FixNav />
      {/*여기는 고정 네비게이션 바*/}
      <LayoutContents>{/*I want to insert content*/}</LayoutContents>
    </LayoutContainer>
  );
}

{/这是内容组件/}

export default function Process() {
  return (
    <Layout title="제조공정" subTitle="df">
      ???
    </Layout>
  );
}

我制作了 Layout 组件，我想在许多不同的内容中使用这个组件。例如，我想在网站中构建四个内容。这个布局是一样的。无需分别重写。

请告诉我如何流畅地插入组件。 谢谢你..！

Answer 1

这是children 属性

export default function Layout({ prop, children, title, subTitle, item }) {
  return (
    <LayoutContainer>
      <LayoutMain>
        <MainRow>
          <MainSubTitle>{subTitle}</MainSubTitle>
          <MainTitle>{title}</MainTitle>
          <MainText>
            우리는 모두 모여 춤을 추지. Let's get it.
          </MainText>
        </MainRow>
      </LayoutMain>
      <FixNav />
      {/*여기는 고정 네비게이션 바*/}
      <LayoutContents>{children}</LayoutContents>
    </LayoutContainer>
  );
}