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

Question

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

Answer 1

你可以试试这个：

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

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

Answer 2

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

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

这是，您获得了 class，然后您可以随心所欲地使用它。

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;

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

How to render variable component in react

components

reactjs