renderBreadcrumb() {
const {routes} = this.props;
const items = routes.map((route, idx) => {
let content = null;
if (idx == 0) {
content = <IndexLink to="/">{route.name}</IndexLink>
} else {
content = route.name;
}
return <Breadcrumb.Item key={idx}>{content}</Breadcrumb.Item>;
});
return <Breadcrumb>{items}</Breadcrumb>;
} {this.renderBreadcrumb()}

react 全局面包屑的更多相关文章

  1. react+ant design Breadcrumb面包屑组件

    import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...

  2. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  3. yii2.0 面包屑的使用

    yii2中面包屑是yii2自带的小部件,类似本网站的导航栏应该就是采用面包屑来完成的 例子如下,需要引入 yii\widgets\Breadcrumbs echo Breadcrumbs::widge ...

  4. C# MVC 页面面包屑以及相应的权限验证操作

    一.特性类 /// <summary> /// 访问权限控制属性. /// </summary> [AttributeUsage(AttributeTargets.Method ...

  5. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  6. 菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码

    比如我们要写一个菜单导航/URHere/面包屑,如: 首页 > 个人中心 > 修改密码 代码: <ul> <li><a href="javascri ...

  7. 缓存篇(Cache)~第一回 使用static静态成员实现服务器端缓存(导航面包屑)

    返回目录 今天写缓存篇的第一篇文章,在写完目录后,得到了一些朋友的关注,这给我之后的写作带来了无穷的力量,在这里,感谢那几位伙伴,哈哈! 书归正传,今天我带来一个Static静态成员的缓存,其实它也不 ...

  8. 爱上MVC3系列~开发一个站点地图(俗称面包屑)

    回到目录 原来早在webform控件时代就有了SiteMap这个东西,而进行MVC时代后,我们也希望有这样一个东西,它为我们提供了不少方便,如很方便的实现页面导航的内容修改,页面导航的样式换肤等. 我 ...

  9. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

随机推荐

  1. n & (n-1)

    n&(n-1)作用:将n的二进制表示中的最低位为1的改为0,先看一个简单的例子: n = 10100(二进制),则(n-1) = 10011 ==>n&(n-1) = 10000 ...

  2. BNUOJ-29357 Bread Sorting 模拟

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29357 直接模拟就可以了.. //STATUS:C++_AC_190MS_1884KB # ...

  3. [读书笔记]了不起的node.js(三)

    这周的nodejs学习内容为几个依赖包的使用,把书上的例子都敲了一遍.这篇就以例程为线索,复习一下一周的工作. 1.connect 这个例程主要是使用connect依赖包,connect提供一个中间件 ...

  4. hdu4587-TWO NODES(割点)

    #include <bits/stdc++.h> using namespace std; ; ; struct Edge { int to, next; } edge[M]; int h ...

  5. SQL2008-中不想插入从复记录

    If not exists (SELECT ID FROM StuffAgitationYield where EMAgitation_ID=1 and YieldDateTime'2012-06-1 ...

  6. nyoj 488 素数环

    素数环 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 有一个整数n,把从1到n的数字无重复的排列成环,且使每相邻两个数(包括首尾)的和都为素数,称为素数环. 为了简 ...

  7. IOS知识小记

    iOS开发 小知识点 http://www.cnblogs.com/tangbinblog/archive/2012/07/20/2601324.html Objective-C中的instancet ...

  8. java中调用dll文件的两种方法

    一中是用JNA方法,另外是用JNative方法,两种都是转载来的, JNA地址:http://blog.csdn.net/shendl/article/details/3589676   JNativ ...

  9. CentOS 6.5 下载地址

    CentOS 6.5 主要改动 Precision Time Protocol(精确时间协议)—— 原先是项技术预览 —— 现在已获全面支持.以下驱动程序支持网络时间戳印:bnx2x.tg3.e100 ...

  10. multiselect获取选中的多个下拉项的值(逗号分割的字符串)

    /*传入下拉select标签*/ function get_selected(mslt_employees) { var emplo =mslt_employees.multiselect(" ...