ant-design / ant-design/pro-components
🧐[问题]@ant-design/pro-layout@6.9.0版本,通过collapsedButtonRender实现自定义按钮,外部会包裹一层标签,如何去除外部包裹的标签。
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🧐 问题描述
由于需要实现类似以下效果

想通过collapsedButtonRender实现自定义按钮,通过绝对定位,定位至菜单右侧,但发现渲染后外部会包裹一层标签,渲染后的结果:

请问如何去除外部包裹的标签。
### 💻 示例代码
`
(
{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
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