内容简介:暴露的比如 :
React 16.4
/ UmiJS 2.2
/ Antd 3.x
/ react-router-breadcrumbs-hoc 2.x
: API简洁易懂
效果图
- 非
antd
风格
-
antd
风格
源码及实现
暴露的 props
:
-
data
: 面包屑的映射关系,数组(react-router-breadcrumbs-hoc
要求的那种)
比如 : const routes = [{ path: '/', breadcrumb: '首页' }]
;
若是不传递的情况下,高阶组件( react-router-breadcrumbs-hoc
)会自动获取路径名字为面包屑的名字
Breakcrumbs
import Link from 'umi/link'; import withBreadcrumbs from 'react-router-breadcrumbs-hoc'; import { Breadcrumb, Badge, Icon } from 'antd'; // 更多配置请移步 https://github.com/icd2k3/react-router-breadcrumbs-hoc const routes = [{ path: '/', breadcrumb: '首页' }]; const Breadcrumbs = ({ data }) => { if (data && Array.isArray(data)) { const AntdBreadcrumb = withBreadcrumbs(data)(({ breadcrumbs }) => { return ( <Breadcrumb separator={<Icon type="double-right" />} classNames="spread"> {breadcrumbs.map((breadcrumb, index) => ( <Breadcrumb.Item key={breadcrumb.key}> {breadcrumbs.length - 1 === index ? ( <Badge status="processing" text={breadcrumb} /> ) : ( <Link to={{ pathname: breadcrumb.props.match.url, state: breadcrumb.props.match.params ? breadcrumb.props.match.params : {}, query: breadcrumb.props.location.query ? breadcrumb.props.location.query : {}, }} > {breadcrumb} </Link> )} </Breadcrumb.Item> ))} </Breadcrumb> ); }); return <AntdBreadcrumb />; } const DefaultBreadcrumb = withBreadcrumbs(routes)(({ breadcrumbs }) => ( <div> {breadcrumbs.map((breadcrumb, index) => ( <span key={breadcrumb.key}> <Link to={{ pathname: breadcrumb.props.match.url, state: breadcrumb.props.match.params ? breadcrumb.props.match.params : {}, query: breadcrumb.props.location.query ? breadcrumb.props.location.query : {}, }} > {breadcrumb} </Link> {index < breadcrumbs.length - 1 && <i> / </i>} </span> ))} </div> )); return <DefaultBreadcrumb />; }; export default Breadcrumbs; 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- RubyMine 2017.2 EAP 2:Ruby 的面包屑功能
- Vue手把手带你撸项目系列之动态面包屑
- 封装JDBC—非框架开发必备的封装类
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
- docker 封装 alinode
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
高性能网站建设进阶指南
Steve Souders / 口碑网前端团队 / 电子工业出版社 / 2010年4月 / 49.80元
性能是任何一个网站成功的关键,然而,如今日益丰富的内容和大量使用Ajax的Web应用程序已迫使浏览器达到其处理能力的极限。Steve Souders是Google Web性能布道者和前Yahoo!首席性能工程师,他在本书中提供了宝贵的技术来帮助你优化网站性能。 Souders的上一本畅销书《高性能网站建设指南》(High Performance Web Sites)震惊了Web开发界,它揭示......一起来看看 《高性能网站建设进阶指南》 这本书的介绍吧!