ant-design / ant-design/pro-components

🧐[问题]@ant-design/pro-layout@6.9.0版本,通过collapsedButtonRender实现自定义按钮,外部会包裹一层标签,如何去除外部包裹的标签。

Open
#9,012 0 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

### 🧐 问题描述
由于需要实现类似以下效果
![Image](https://github.com/user-attachments/assets/6d29c67a-a935-4a54-83bd-8c98f80a54f7)
想通过collapsedButtonRender实现自定义按钮,通过绝对定位,定位至菜单右侧,但发现渲染后外部会包裹一层标签,渲染后的结果:

![Image](https://github.com/user-attachments/assets/43e22526-2186-4b54-bc4e-e781300070bd)

请问如何去除外部包裹的标签。

### 💻 示例代码
`

(

{logoDom}
{titleDom}

)}
fixedHeader={true}// 固定头部
fixSiderbar={true}// 固定侧边栏
headerRender={headerRender}
onCollapse={handleMenuCollapse}

menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
return defaultDom
}
return
{defaultDom}
;
}}

itemRender={(route, params, routes, paths) => {
const first = routes.indexOf(route) === 0;
return first ? (

{formatMessage({id:route.breadcrumbName})}

) : (

{formatMessage({id:route.breadcrumbName})}

);
}}
collapsedButtonRender={()=>()}
menuFooterRender={(props) => {
console.log("menuFooterRender::",props)
if (props?.collapsed) return undefined;
return (






用户名称



语言



退出登录


);
}}
footerRender={footerRender}
menuDataRender={menuDataRender}
rightContentRender={() => }
>

{children}


`

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start by inspecting the collapsedButtonRender behavior in ant-design/pro-components at version 6.9.0 and compare the rendered DOM with the example in the issue. Done means the custom collapsed button can be positioned without the unwanted outer wrapper, or the supported limitation and workaround are documented.

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.