[问题 | question]使用动态路由,在面板没折叠可正常显示,折叠了后图标消失不。

Author: edifangyiCreated Jul 3, 2026Updated Jul 3, 2026

问题描述 | Problem description

使用动态路由,在面板没折叠的时候是可以正常显示出来的,但是折叠了后,图标消失不见。

ImageImage

示例代码 | Sample code

import * as Icons from '@ant-design/icons';

export const layout: RunTimeLayoutConfig = ({ initialState }) => {

const menuApps = convertMenuTree(initialState?.currentUser?.menuApps ?? [], district);

return {

...initialState?.settings,
menu: {
  request: async () => menuApps,
  locale: true
},

};

} // 将字符串图标转为 React 元素 function getIconComponent(iconName?: string): React.ReactNode { if (!iconName) return null; const IconComp = (Icons as any)[iconName]; return IconComp ? : null; } const convertMenuTree = (menus: UserLogin.UserLoginCurrentAccountMenuAppVo[], district: string): any[] => { if (!menus || !Array.isArray(menus)) return []; // ✅ 防御性处理 return menus .filter(menu => menu.visible !== 0) // 前端二次过滤 .map(menu => { // 处理路径:为内部路由添加区县前缀(外链不加前缀) let path = menu.path; if (!menu.isExternal && path && !path.startsWith('http')) { // 确保路径以 / 开头,然后插入区县 const cleanPath = path.startsWith('/') ? path : /${path}; path = /${district}${cleanPath}; }

  const iconName = menu.icon || 'MenuOutlined';
  const iconComp = getIconComponent(iconName);

  const menuItem: any = {
    key: menu.id,
    path: path,
    name: menu.name,        // 直接显示文本,不使用国际化
    icon: iconComp,
  };
  if (menu.children && menu.children.length) {
    menuItem.children = convertMenuTree(menu.children, district);
  }
  return menuItem;
});

};

type UserLoginCurrentAccountMenuAppVo = { id: string; parentId: string; weight: number; name: string; path: string | null; component: string | null; icon: string | null; menuType: 1 | 2; // 1: 目录, 2: 菜单项 visible: 1 | 0; isExternal: 1 | 0; children?: UserLoginCurrentAccountMenuAppVo[]; }

icon="HomeOutlined"

其他信息 | Other information

OS:windows

Node:"version": "6.0.0",

"@ant-design/charts": "^2.6.7",
"@ant-design/icons": "^6.1.0",
"@ant-design/pro-components": "^2.8.10",
"@ant-design/v5-patch-for-react-19": "^1.0.3",
"@antv/g2": "^5.4.8",
"@zumer/snapdom": "^2.12.9",
"ali-oss": "^6.23.0",
"antd": "^6.3.1",
"antd-style": "^3.7.0",
"classnames": "^2.5.1",
"dayjs": "^1.11.13",
"lodash": "^4.17.23",
"react": "^19.1.0",
"react-dom": "^19.1.0",

"@ant-design/pro-cli": "^3.3.0", "@biomejs/biome": "^2.0.6", "@commitlint/cli": "^19.5.0", "@commitlint/config-conventional": "^19.5.0", "@testing-library/dom": "^10.4.0", "@testing-library/react": "^16.0.1", "@types/express": "^5.0.3", "@types/jest": "^30.0.0", "@types/lodash": "^4.17.10", "@types/node": "^24.0.10", "@types/react": "^19.1.5", "@types/react-dom": "^19.1.5", "@types/react-helmet": "^6.1.11", "@umijs/max": "^4.3.24", "cross-env": "^7.0.3", "express": "^4.21.1", "gh-pages": "^6.1.1", "husky": "^9.1.7", "jest": "^30.0.4", "jest-environment-jsdom": "^29.7.0", "lint-staged": "^16.1.2", "mockjs": "^1.1.0", "ts-node": "^10.9.2", "typescript": "^5.6.3", "umi-presets-pro": "^2.0.3", "umi-serve": "^1.9.11" 浏览器 | browser: chrome

Source: ant-design/ant-design-pro