Ant Design Pro V5精讲（实践篇二）：二级菜单不显示图标解决方案

用户需求场景

ant design pro v5版本二级菜单不显示图标，官方的说法是故意关掉此功能，主要原因是由于要支持的话,当动态生成菜单时，意味着要引入所有的图片库，造成增加3M左右的工程大小。

解决办法

app.tsx中增加以下内容menuItemRender内容，如下：

// 南极客 fixed 2021.7.8
export const layout: RunTimeLayoutConfig = ({ initialState }) =>  {
  return {
    // 南极客 修补：二级图标正常显示2021.7.8 
     menuItemRender: (menuItemProps, defaultDom) => {
      if (
        menuItemProps.isUrl || !menuItemProps.path) {
        return defaultDom;
      }
      // 支持二级菜单显示icon
      return (
       <Link to={menuItemProps.path}>
          {menuItemProps.pro_layout_parentKeys 
          && menuItemProps.pro_layout_parentKeys.length > 0 &&
          menuItemProps.icon}{defaultDom}
        </Link>
    );
  },
rightContentRender: () => <RightContent />,
  disableContentMargin: false,
    /* 去掉水印功能 南极客 2021.4.22
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    */
    footerRender: () => <Footer />,
      onPageChange: () => {
        const { location } = history;
        // 如果没有登录，重定向到 login
        if (!initialState?.currentUser && location.pathname !== loginPath) {
          history.push(loginPath);
        }
      },
        links: isDev
          ? [
            /* 去掉菜单底部链接  南极客 2021.4.22
              <Link to="/umi/plugin/openapi" target="_blank">
                <LinkOutlined />
                <span>openAPI 文档</span>
              </Link>,
              <Link to="/~docs">
                <BookOutlined />
                <span>业务组件文档</span>
              </Link>,
              */
          ]
          : [],
          menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    ...initialState?.settings,
  };
};
复制代码