diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index 29b0280a4d41b78b4fcd5c1b85e7848115ddbd25..7ba31c45b434f5fc6ab1a4e3056b80261538b903 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -60,21 +60,25 @@ export default class PageHeader extends PureComponent {
// Generated according to props
conversionFromProps = () => {
const { breadcrumbList, breadcrumbSeparator, linkElement = 'a' } = this.props;
+
return (
- {breadcrumbList.map(item => (
-
- {item.href
- ? createElement(
- linkElement,
- {
- [linkElement === 'a' ? 'href' : 'to']: item.href,
- },
- item.title
- )
- : item.title}
-
- ))}
+ {breadcrumbList.map(item => {
+ const title = this.props.itemRender ? this.props.itemRender(item) : item.title;
+ return (
+
+ {item.href
+ ? createElement(
+ linkElement,
+ {
+ [linkElement === 'a' ? 'href' : 'to']: item.href,
+ },
+ title
+ )
+ : title}
+
+ );
+ })}
);
};
@@ -85,14 +89,18 @@ export default class PageHeader extends PureComponent {
const pathSnippets = urlToList(routerLocation.pathname);
// Loop data mosaic routing
const extraBreadcrumbItems = pathSnippets.map((url, index) => {
+ console.log(url);
const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component;
+ const name = this.props.itemRender
+ ? this.props.itemRender(currentBreadcrumb)
+ : currentBreadcrumb.name;
return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? (
{createElement(
isLinkable ? linkElement : 'span',
{ [linkElement === 'a' ? 'href' : 'to']: url },
- currentBreadcrumb.name
+ name
)}
) : null;
diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md
index 4227e6743daec6b07f994bb7519f11269e92f5b4..c446d4106df40aa71d840ca947cb84e0e49432f6 100644
--- a/src/components/PageHeader/index.md
+++ b/src/components/PageHeader/index.md
@@ -28,6 +28,7 @@ order: 11
| tabActiveKey | 当前高亮的 tab 项 | string | - |
| tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项 |
| onTabChange | 切换面板的回调 | (key) => void | - |
+| itemRender | 自定义节点方法 | (menuItem) => ReactNode | - |
| linkElement | 定义链接的元素,默认为 `a`,可传入 react-router 的 Link | string\|ReactElement | - |
> 面包屑的配置方式有三种,一是直接配置 `breadcrumbList`,二是结合 `react-router@2` `react-router@3`,配置 `routes` 及 `params` 实现,类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router),三是结合 `react-router@4`,配置 `location` `breadcrumbNameMap`,优先级依次递减,脚手架中使用最后一种。 对于后两种用法,你也可以将 `routes` `params` 及 `location` `breadcrumbNameMap` 放到 context 中,组件会自动获取。
diff --git a/src/pages/layouts/BasicLayout.js b/src/pages/layouts/BasicLayout.js
index 8885e786e2988b01f79a2096fe62b088831b3ed1..537192e39e136bc21411eda6e551917f7814247d 100644
--- a/src/pages/layouts/BasicLayout.js
+++ b/src/pages/layouts/BasicLayout.js
@@ -26,18 +26,18 @@ const { AuthorizedRoute, check } = Authorized;
* @param {Object} menuData 菜单配置
* @param {Object} routerData 路由配置
*/
-const getBreadcrumbNameMap = (menuData, routerData) => {
- const result = {};
- const childResult = {};
- for (const i of menuData) {
- if (!routerData[i.path]) {
- result[i.path] = i;
- }
- if (i.children) {
- Object.assign(childResult, getBreadcrumbNameMap(i.children, routerData));
- }
- }
- return Object.assign({}, routerData, result, childResult);
+const getBreadcrumbNameMap = (meun, router) => {
+ const routerMap = {};
+ const mergeMeunAndRouter = meunData => {
+ meunData.forEach(meunItem => {
+ routerMap[meunItem.path] = Object.assign(meunItem, router);
+ if (meunItem.children) {
+ mergeMeunAndRouter(meunItem.children);
+ }
+ });
+ };
+ mergeMeunAndRouter(meun);
+ return routerMap;
};
const query = {
@@ -68,6 +68,7 @@ const query = {
class BasicLayout extends React.PureComponent {
getContext() {
const { location, routerData, menuData } = this.props;
+ console.log(getBreadcrumbNameMap(menuData, routerData));
return {
location,
breadcrumbNameMap: getBreadcrumbNameMap(menuData, routerData),
diff --git a/src/pages/layouts/PageHeaderLayout.js b/src/pages/layouts/PageHeaderLayout.js
index 80ccade68dbd92f35e810a2443801b617509ef26..5b6b41791dbcefca2d01c23f66abc9af4945b540 100644
--- a/src/pages/layouts/PageHeaderLayout.js
+++ b/src/pages/layouts/PageHeaderLayout.js
@@ -18,6 +18,12 @@ const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) =>
key="pageheader"
{...restProps}
linkElement={Link}
+ itemRender={item => {
+ if (item.locale) {
+ return ;
+ }
+ return item.name;
+ }}
/>
);
}}