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

Question

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

标签： reactjscomponents

Answer 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;