Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
pro-blocks
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
duanledexianxianxian
pro-blocks
Commits
d8b0a9ec
Commit
d8b0a9ec
authored
Dec 28, 2017
by
ddcat1115
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix breadcrumb prop priority
parent
12d8b407
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
22 additions
and
20 deletions
+22
-20
src/components/PageHeader/index.js
src/components/PageHeader/index.js
+18
-18
src/components/PageHeader/index.md
src/components/PageHeader/index.md
+4
-2
No files found.
src/components/PageHeader/index.js
View file @
d8b0a9ec
...
...
@@ -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
;
}
...
...
src/components/PageHeader/index.md
View file @
d8b0a9ec
...
...
@@ -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 中,
组件会自动获取。
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment