内容简介:暴露的比如 :
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
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通Java并发编程(第2版)
[西] 哈维尔·费尔南德斯·冈萨雷斯 / 唐富年 / 人民邮电出版社 / 2018-10 / 89.00元
Java 提供了一套非常强大的并发API,可以轻松实现任何类型的并发应用程序。本书讲述Java 并发API 最重要的元素,包括执行器框架、Phaser 类、Fork/Join 框架、流API、并发数据结构、同步机制,并展示如何在实际开发中使用它们。此外,本书还介绍了设计并发应用程序的方法论、设计模式、实现良好并发应用程序的提示和技巧、测试并发应用程序的工具和方法,以及如何使用面向Java 虚拟机的......一起来看看 《精通Java并发编程(第2版)》 这本书的介绍吧!