如何在反应中渲染可变组件答案

【问题标题】：How to render variable component in react如何在反应中渲染可变组件
【发布时间】：2021-05-15 15:23:17
【问题描述】：

我想在所有页面中渲染一个可变组件在 react 和 MobileNav 中。我发现 React.cloneElement 是可行的，但无法将我的 MobileNav 传递给它。

const index: React.FC<LayoutProps> = ({ children, type }) => {
  let Layout = null;

  const { onToggleOpen, isOpen } = useHamburger();

  switch (type) {
    case "home": {
      Layout = <HomeLayout />;
      break;
    }
    case "basic": {
      Layout = <BasicBlogLayout />;
      break;
    }
    case "list": {
      //
      break;
    }
    default: {
      Layout = <HomeLayout />;
    }
  }

  return (
    <Layout>
      <MobileNav onClick={onToggleOpen} isOpen={isOpen} />
      {children}
    </Layout>
  );

  // return React.cloneElement(Layout, { children }); // this is work, but i also need render MobileNav.
};

export default index;

【问题讨论】：

标签： reactjs components

【解决方案1】：

当您说Layout = <HomeLayout />; 时，您已经在创建一个组件的实例。

你真正需要做的是Layout = HomeLayout;

这是，你得到了这个类，然后你就可以随心所欲地使用它了。

const index: React.FC<LayoutProps> = ({ children, type }) => {
  let Layout = null;

  const { onToggleOpen, isOpen } = useHamburger();

  switch (type) {
    case "home": {
      Layout = HomeLayout;
      break;
    }
    case "basic": {
      Layout = BasicBlogLayout;
      break;
    }
    case "list": {
      //
      break;
    }
    default: {
      Layout = HomeLayout;
    }
  }

  return (
    <Layout>
      <MobileNav onClick={onToggleOpen} isOpen={isOpen} />
      {children}
    </Layout>
  );

};

export default index;

【讨论】：

【解决方案2】：

你可以试试这个：

   const childrenToRender = (
       <>
        <MobileNav onClick={onToggleOpen} isOpen={isOpen} />
        {children}
       </>
    )

    return React.cloneElement(Layout, { children: childrenToRender  });

【讨论】：