React中如何在Layout公共布局组件内灵活插入不同内容组件

你可以通过React内置的children属性实现内容插槽，操作两步即可：

• 第一步：修改Layout组件，接收并渲染children
  修改后的Layout组件代码如下：

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

• 第二步：在业务页面组件中直接嵌套内容即可
  所有写在<Layout>开闭标签之间的内容，都会自动作为children传入Layout组件，渲染到预留的LayoutContents位置，示例如下：

// Process 页面组件示例
export default function Process() {
  return (
    <Layout title="제조공정" subTitle="df">
      {/* 这里直接写你当前页面需要渲染的自定义内容即可 */}
      <div>
        <h2>制造流程第一步</h2>
        <p>这里是制造流程的具体介绍</p>
      </div>
      {/* 也可以嵌套其他自定义组件 */}
      <ProcessStepList />
    </Layout>
  );
}

如果需要多个插槽（比如同时要自定义侧边栏、页脚等多个位置的内容），也可以通过自定义props传入对应组件，比如给Layout传asideContent、footerContent这类参数，在对应位置渲染即可，单插槽场景用children是最简便的方案。

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