一、配置

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. MySQL基础架构分析

    文章已托管到GitHub,大家可以去GitHub查看阅读,欢迎老板们前来Star! 搜索关注微信公众号 码出Offer 领取各种学习资料! MySQL基础架构 一.引言 我们在学习MySQL的时候,迈 ...

  2. unity-Timeline实践

    前言 建议入门方式(基本的手册知识了解之后):官方Demo TimelineInputDemo 自定义轨迹 CustomTrack Signal 标记 创建Emitter 和 Receiver 引用: ...

  3. JMeter-一个接口的返回值作为输入传给其他接口

    背景: 在用JMeter写接口case,遇到一种情况,接口1查看列表接口,接口2查看详情接口,接口2需要传入接口1列表的第一条数据的id 解决方案: 首先放一下总体截图 具体步骤 1-新建一个Thre ...

  4. springboot使用maven命令打包jar及配置文件配置

    sspringboot项目如果不想每次修改配置文件就要重新打包jar的话,可以进行以下配置进行打包 1.在resources下新建assembly文件夹package.xml <?xml ver ...

  5. Ubuntu虚拟机设置共享文件夹

    Ubuntu虚拟机设置共享文件夹 注:个人笔记,小白笔记. 点击设置 进入到Ubuntu 中 cd /mnt/hgfs/ 后   我们会看到自己设置的共享文件夹.

  6. [redis] -- 缓存雪崩和缓存穿透、缓存击穿问题解决方案篇

    缓存雪崩 缓存同一时间大面积的失效,所以,后面的请求都会落到数据库上,造成数据库短时间内承受大量请求而崩掉 解决方案 事前:尽量保证整个redis集群的高可用性,发现机器宕机尽快补上.选择合适的内存淘 ...

  7. .Net Core in Docker极简入门(下篇)

    Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 Docker-Compose 代码修改 yml file up & down 镜像仓库 最后 前言 上一篇[. ...

  8. heredoc

    Heredoc在正规的PHP文档中和技术书籍中一般没有详细讲述.他是一种Perl风格的字符串输出技术.使用heredoc技术可以实现界面与代码的准分离,比如phpwind模板.规则如下:1.”< ...

  9. Linux下给PHP安装redis扩展

    一.下载redis扩展源码包 PHP官网下载地址:http://pecl.php.net/package/redis 二.安装依赖插件 yum -y install wget make gcc gcc ...

  10. Spring集成Quartz定时任务

    1.导入jar包 2.配置applicationContext.xml文件 <!-- 任务调度1 --> <!-- bean id="simpleJob" cla ...