React 折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件

栏目: IOS · Android · 发布时间: 5年前

内容简介:暴露的比如 :

React 16.4 / UmiJS 2.2 / Antd 3.x / react-router-breadcrumbs-hoc 2.x : API简洁易懂

效果图

  • antd 风格
React 折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件
  • antd 风格
React 折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件

源码及实现

暴露的 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;


复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精通Java并发编程(第2版)

精通Java并发编程(第2版)

[西] 哈维尔·费尔南德斯·冈萨雷斯 / 唐富年 / 人民邮电出版社 / 2018-10 / 89.00元

Java 提供了一套非常强大的并发API,可以轻松实现任何类型的并发应用程序。本书讲述Java 并发API 最重要的元素,包括执行器框架、Phaser 类、Fork/Join 框架、流API、并发数据结构、同步机制,并展示如何在实际开发中使用它们。此外,本书还介绍了设计并发应用程序的方法论、设计模式、实现良好并发应用程序的提示和技巧、测试并发应用程序的工具和方法,以及如何使用面向Java 虚拟机的......一起来看看 《精通Java并发编程(第2版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具