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

Wilker 发表于 Dev

威尔克

我想在所有页面中的 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;

尼桑斯·雷迪

当您说时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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。