[问题 | question]使用动态路由,在面板没折叠可正常显示,折叠了后图标消失不。
问题描述 | Problem description
使用动态路由,在面板没折叠的时候是可以正常显示出来的,但是折叠了后,图标消失不见。
示例代码 | 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