ant-design / ant-design/pro-components

对于ProLayout的配置,自定义menuItemRender方法,在边栏展开时,会出现残影

Open
#8,902 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

在app.tsx中,进行layout的配置:
```
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
....
menuItemRender: (menuItemProps, defaultDom, props) => {
if (menuItemProps.isUrl || !menuItemProps.path || (!menuItemProps.children && menuItemProps.parentId === 'max-tabs')) {
return defaultDom;
}
return

{menuItemProps.icon}
{menuItemProps.name}


},
...
}
```
这里通过自定义菜单项的渲染方法:menuItemRender,主要是实现对于子菜单,也支持图标,因为正常情况下,子菜单的图标就算配置了,也是不显示的,如果直接返回defaultDom,就不会出现残影,比如:
menuItemRender: (menuItemProps, defaultDom, props) => {
return defaultDom;
}

### © 版本信息

- ProComponents 版本: [2.6.48]
- umi 版本: "@umijs/max": "^4.1.1",
- 浏览器环境:Chrome 131.0.6778.86(正式版本) (arm64)
- 开发环境 [mac OS Cursor ]

### 🚑 其他信息
image

Contributor guide

Open the contributing guide

Research direction

Reproduce the artifact in app.tsx using the ProLayout menuItemRender configuration shown, with the sidebar expanded and custom submenu icons enabled. Compare it with returning defaultDom, then trace the ProLayout menu rendering path; done means the sidebar no longer shows residual images while using the custom renderer.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.