提交 d8b0a9ec 编写于 作者: D ddcat1115

fix breadcrumb prop priority

上级 12d8b407
......@@ -64,7 +64,23 @@ export default class PageHeader extends PureComponent {
} = this.props;
const clsString = classNames(styles.pageHeader, className);
let breadcrumb;
if (routes && params) {
if (breadcrumbList && breadcrumbList.length) {
breadcrumb = (
<Breadcrumb className={styles.breadcrumb}>
{
breadcrumbList.map(item => (
<Breadcrumb.Item key={item.title}>
{item.href ? (
createElement(linkElement, {
[linkElement === 'a' ? 'href' : 'to']: item.href,
}, item.title)
) : item.title}
</Breadcrumb.Item>)
)
}
</Breadcrumb>
);
} else if (routes && params) {
breadcrumb = (
<Breadcrumb
className={styles.breadcrumb}
......@@ -73,7 +89,7 @@ export default class PageHeader extends PureComponent {
itemRender={this.itemRender}
/>
);
} else if (location && location.pathname && (!breadcrumbList)) {
} else if (location && location.pathname) {
const pathSnippets = location.pathname.split('/').filter(i => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
......@@ -101,22 +117,6 @@ export default class PageHeader extends PureComponent {
{breadcrumbItems}
</Breadcrumb>
);
} else if (breadcrumbList && breadcrumbList.length) {
breadcrumb = (
<Breadcrumb className={styles.breadcrumb}>
{
breadcrumbList.map(item => (
<Breadcrumb.Item key={item.title}>
{item.href ? (
createElement(linkElement, {
[linkElement === 'a' ? 'href' : 'to']: item.href,
}, item.title)
) : item.title}
</Breadcrumb.Item>)
)
}
</Breadcrumb>
);
} else {
breadcrumb = null;
}
......
......@@ -18,12 +18,14 @@ order: 11
| action | 操作区,位于 title 行的行尾 | ReactNode | - |
| content | 内容区 | ReactNode | - |
| extraContent | 额外内容区,位于content的右侧 | ReactNode | - |
| breadcrumbList | 面包屑数据,配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - |
| routes | 面包屑相关属性,router 的路由栈信息 | object[] | - |
| params | 面包屑相关属性,路由的参数 | object | - |
| breadcrumbList | 面包屑数据,配置了 `routes` `params` 时此属性无效 | array<{title: ReactNode, href?: string}> | - |
| location | 面包屑相关属性,当前的路由信息 | object | - |
| breadcrumbNameMap | 面包屑相关属性,路由的地址-名称映射表 | object | - |
| tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - |
| tabActiveKey | 当前高亮的 tab 项 | string | - |
| onTabChange | 切换面板的回调 | (key) => void | - |
| linkElement | 定义链接的元素,默认为 `a`,可传入 react-router 的 Link | string\|ReactElement | - |
> 面包屑的配置方式有两种,一是结合 `react-router`,通过配置 `routes` 及 `params` 实现,类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router);二是直接配置 `breadcrumbList`。 你也可以将 `routes` 及 `params` 放到 context 中,`PageHeader` 组件会自动获取。
> 面包屑的配置方式有三种,一是直接配置 `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 中,组件会自动获取。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册