ReactJS - 带有结束标记和子元素的动态组件名称

Question

React 的新手，我试图弄清楚是否有可能有一个带有子组件的动态元素名称。
我试图完成的是创建一个站点，该站点带有连接/未连接的用户区域，在用户连接时使用相同的内容而几乎没有区别。
为了实现这一点，我做了这样的布局组件:

//...
export default function PublicLayout(props) {
    return <>
        <Header />
        <HeaderMobile />

        {props.children}

        <Footer />
    </>;
}

import HeaderPrivate from "../app/components/partials/header-private";

export default function PrivateLayout(props) {
    return <>
        <HeaderPrivate />

        {props.children}
    </>;
}

到目前为止，我使用的是 PublicLayout在我的项目中:

export default function Home() {
    return <PublicLayout>
        {/*here are my child components*/}
    </PublicLayout>;
}

但我想知道是否有可能有这样的东西:

export default function Home() {
    let connected = false;
    let Layout = connected ? 'PublicLayout' : 'PrivateLayout';

    return <Layout>
        {/*here are my child components*/}
    </Layout>;
}

我已经看到了几种动态组件名称的解决方案(我所看到的都是针对没有子组件的单个组件)，但没有一个对我有用。
我知道有另一种方法可以通过执行以下操作来实现我的目标，但是如果我可以拥有一个动态组件名称，那对我来说可能是最好的情况。
这是使用 if 语句的方法:

export default function Home() {
    let connected = false;

    if ( connected ) {
        return <PrivateLayout>
            {/*here are my child components*/}
        </PrivateLayout>;
    }

    return <PublicLayout>
        {/*here are my child components*/}
    </PublicLayout>;
}

那么，有没有办法实现这一点？

Answer 1

绝对有一种方法可以在运行时动态设置组件。
Choosing the Type at Runtime
创建一个组件映射对象来保存对导入组件的引用

const components = {
  PrivateLayout,
  PublicLayout
};

然后使用 connected 执行类似于您尝试的操作要在映射中查找要分配给包装器的组件的值。

export default function Home() {
  const connected = false;
  const Layout = connected ? components.PublicLayout : components.PrivateLayout;

  return (
    <Layout>
      {/*here are my child components*/}
    </Layout>
  );
}