一、配置

this.state={
tabs:[
   {
path:"/home",
icon:"\ue628",
name:"首页",
},
{
path:"/find",
icon:"\ue663",
name:"发现",
},
{
path:"/order",
name:"订单",
icon:"\ue737",
},
{
path:"/mine",
name:"我的",
icon:"\ue617",
}  ]
}

二、tabbar遍历

{
this.state.tabs.map((item,index) => (
<li key={index}>
<NavLink to={item.path}>
<i className="iconfont">{item.icon}</i>
<span>{item.name}</span>
</NavLink>
</li>
))
}

react中iconfont如何使用的更多相关文章

  1. react中iconfont字体图标不显示问题

    如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...

  2. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  3. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  4. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  5. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  6. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  7. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  8. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  9. React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...

随机推荐

  1. bzoj2295【POJ Challenge】我爱你啊*

    bzoj2295[POJ Challenge]我爱你啊 题意: 求一个字符串中有多少个"luvletter"(不包括引号).字符串长度≤100000. 题解: 连kmp都不用…… ...

  2. 老司机带你玩转面试(3):Redis 高可用之主从模式

    前文回顾 建议前面文章没看过的同学先看下前面的文章: 「老司机带你玩转面试(1):缓存中间件 Redis 基础知识以及数据持久化」 「老司机带你玩转面试(2):Redis 过期策略以及缓存雪崩.击穿. ...

  3. oracle 启动报ORA-01105 ORA-19808

    bash-4.4$ srvctl start instance -i jfcddb2 -d jfcddb PRCR-1013 : Failed to start resource ora.jfcddb ...

  4. Linux常用命令归类总结

    文件相关 创建文件 touch: touch README.md ">"重定向: echo 'study and share' > README.md vi & ...

  5. three.js 数学方法之Box3

    从今天开始郭先生就会说一下three.js 的一些数学方法了,像Box3.Plane.Vector3.Matrix3.Matrix4当然还有欧拉角和四元数.今天说一说three.js的Box3方法(B ...

  6. MySQL数据库---库的操作

    MySQL数据库中,以库,表,记录的形式管理所有的数据,安装MySQL数据库的服务器上可以包含多个库,一个库中包含多张表,一张表中包含多条记录.库对应的是文件系统中文件夹的概念,表对应的是文件的概念, ...

  7. 阿里P9又有新瓜吃咯,马云震怒!!

    自从蒋凡出轨事件曝光之后,阿里这各种瓜来得就像龙卷风,隔三差五的爆出员工出轨事件,普通员工.中层.高管全覆盖,早已集齐7颗阿里瓜瓜,可以召唤神龙了. 上次的出轨事件过去还没有一个月的时间,今天又爆出来 ...

  8. 常用限流算法与Guava RateLimiter源码解析

    在分布式系统中,应对高并发访问时,缓存.限流.降级是保护系统正常运行的常用方法.当请求量突发暴涨时,如果不加以限制访问,则可能导致整个系统崩溃,服务不可用.同时有一些业务场景,比如短信验证码,或者其它 ...

  9. 初识Elastic search—附《Elasticsearch权威指南—官方guide的译文》

    本文作为Elastic search系列的开篇之作,简要介绍其简要历史.安装及基本概念和核心模块. 简史 Elastic search基于Lucene(信息检索引擎,ES里一个index—索引,一个索 ...

  10. 今天上午完成了devicescan,发送了rar包到yzx3233@sina.com

    今天上午完成了devicescan,发送了rar包到yzx3233@sina.com 可以正常扫描和输入了. 还有一个最后的问题,就是选择退出后,程序还在后台