一、配置

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. Git管理修改、撤销和删除文件

    目录 备注: 知识点 管理修改 撤销修改 没有git add添加到暂存区时的撤销 git add添加到暂存区后的撤销 git commit提交后的撤销 删除文件 确定从版本库中删除文件 从暂存区把误删 ...

  2. 使用Python来写mock代码(桩代码)-其实很简单

    1.Mock基本用法 使用Mock能创建你能访问(模拟)的属性和方法 指定类或者函数的返回值和断言方式 创建handle_mock_01.py文件 # 1. 导入mock模块 from unittes ...

  3. OSCP Learning Notes - Capstone(3)

    DroopyCTF Walkthrough Preparation: Download the DroopyCTF virtual machine from the following website ...

  4. 时间序列知识图谱-《利用Python进行数据分析》

    所有内容整理自<利用Python进行数据分析>,使用MindMaster Pro 7.3制作,emmx格式,源文件已经上传Github,需要的同学转左上角自行下载或者右击保存图片. 其他章 ...

  5. CODING DevOps + Nginx-ingress 实现自动化灰度发布

    作者:王炜,CODING DevOps 后端开发工程师,拥有多年研发经验,云原生.DevOps.Kubernetes 资深爱好者,Servicemesher 服务网格中文社区成员.获得 Kuberne ...

  6. 0.9循环=lim(n趋于无穷大)(1-1/10的n次方),所以这是一个极限问题

    0.9循环=lim(n趋于无穷大)(1-1/10的n次方),所以这是一个极限问题 因为lim(...)(1-1/10的n次方)=1 这意味着维尔斯特拉斯发明极限定义之前,这个等号是不成立的,因为没有极 ...

  7. IDEA解决MAVEN下载插件慢问题

    原文链接:https://blog.csdn.net/qq_25983579/article/details/104398915 使用阿里的maven镜像 右键项目选中maven选项,然后选择“ope ...

  8. Django学习路17_聚合函数(Avg平均值,Count数量,Max最大,Min最小,Sum求和)基本使用

    使用方法: 类名.objects.aggregate(聚合函数名('表的列名')) 聚合函数名: Avg 平均值 Count数量 Max 最大 Min 最小 Sum 求和 示例: Student.ob ...

  9. PHP max() 函数

    实例 通过 max() 函数查找最大值: <?phpecho(max(2,4,6,8,10) . "<br>");echo(max(22,14,68,18,15) ...

  10. PHP str_shuffle() 函数

    实例 随机地打乱字符串中的所有字符: <?php高佣联盟 www.cgewang.comecho str_shuffle("Hello World");?> 定义和用法 ...