Breadcrumb 折叠下拉项透传 itemRender,修复整页刷新(WEB-1044)
版本: 0.4.4 · 类型: 🐛 缺陷修复
问题
使用 items + itemRender 时,未折叠项正确调用 itemRender(业务可返回 SPA 导航节点),但折叠进 ... 的项完全在 BreadcrumbEllipsisMenu 内部处理,绕过 itemRender,写死渲染为 <a href>,点击触发浏览器整页导航,与展开态行为不一致。
改动文件
packages/design/src/components/Breadcrumb/Breadcrumb.tsx
改动内容
BreadcrumbItemRenderInfo 新增可选 placement 字段
placement?: 'dropdown';
仅在折叠下拉菜单内渲染时携带(值为 'dropdown');面包屑条正常渲染时不传(undefined)。规范中无 inline 概念,以缺省语义替代,降低调用方心智负担。
BreadcrumbEllipsisMenu 透传 itemRender
BreadcrumbEllipsisMenu 接收 itemRender 与完整已解析列表 allItems,对每个折叠项优先调用 itemRender({ ..., placement: 'dropdown' }),返回 null/undefined 时回退到默认 <a href> 渲染。
内联项的 itemRender 调用不传 placement(保持缺省),调用方可直接用 placement === 'dropdown' 区分行为。
调用方迁移(web4 AskShell)
itemRender={({ placement, item }) => {
if (placement === 'dropdown') {
// 下拉态:直接包一层 onClick navigate,无需关心 hover 样式
return <span onClick={() => navigate({ to: item.href })}>{item.title}</span>;
}
// 面包屑条正常态(placement 为 undefined):原有逻辑不变
return <Button onClick={() => navigate({ to: item.href })}>{item.title}</Button>;
}}