umijs / plugins

🍣 The one-stop shop for official Umi plugins and presets.
349 stars 238 forks source link

layout配置能不能增加一个右侧content渲染(contentRender)满足全局的layout布局配置 #852

Open zrless opened 2 years ago

zrless commented 2 years ago

例子:

export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    footerRender: () => <Footer />,
    contentRender: (children) => < PageContainer>{children}</PageContainer>
  };
};

contentRender可以拿到路由的对应的Component作为children,插入到PageContainer中,这样一来所有页面都有PageContainer,不需要每个页面单独引用。

zrless commented 2 years ago

突然找到一个layout 配置中用 childrenRender 方法,可实现以上效果

export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    footerRender: () => <Footer />,
    childrenRender: (dom: JSX.Element, props: BasicLayoutProps) => {
      console.log(props);
      return <PageContainer>{dom}</PageContainer>;
    },
  };
};
ghost commented 2 years ago

自定义layout