一、配置

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. Tips1:考虑用静态工厂方法代替构造器

    用静态工厂方法来代替构造器为外界提供对象 描述: 静态工厂方法代替构造器来给外界提供对象,创建对象依然是由构造器来完成的 创建对象和提供对象: 创建对象的方式: 构造器 提供对象来哦方式: 构造器 类 ...

  2. Burp Suite Extender Module - 扩展模块

    模块功能: 在扩展模块可以通过使用自定义代码,进行Burp 的自定义操作. 1. Burp Extensions页面 2. BApp Store中可以购买和安装别人写好的扩展功能 3. 在APIs界面 ...

  3. Python Hacking Tools - Port Scanner

    Socket Programming 1.  Scan the target Vulnerable Server. And test it by telnet. 2. Write the scanne ...

  4. Python Ethical Hacking - VULNERABILITY SCANNER(9)

    Automatically Discovering Vulnerabilities Using the Vulnerability Scanner 1. Modify the run_scanner ...

  5. ATX 学习 (四)-atxserver2

    ATXSERVER2 一.main()文件启动 1.首先通过parse_args返回一个Namespace作一些配置,登录页html在SimpleLoginHandler这个里边写着,2.接着通过db ...

  6. Cooperative Groups

    Cooperative Groups 目录 Cooperative Groups 简介 块内组 thread_block tiled_partition Thread Block Tiles Coal ...

  7. vue : 检测用户上传的图片的宽高

    需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...

  8. Python面试题!百度大牛总结十条Python面试题陷阱

    无论是应聘Python web开发,爬虫工程师,或是数据分析,还是自动化运维,都涉及到一些基础的知识!我挑了一些Python的基础面试题,看看你能不能的答上来,也许面试的同学用的着! 问题1:请问如何 ...

  9. Python如何向SQLServer存储二进制图片

    需求是需要用python往 SqlServer中的image类型字段中插入二进制图片 核心代码,研究好几个小时的代码: 安装pywin32,adodbapi image_url = "图片链 ...

  10. xctf-pwn pwn200

    刚看完题目觉得和前面的level3差不多,只是没有给libc而已... 看完大佬的exp之后整个人都不好了.....果然我还是太菜了 32位开了NX sub_8048484,read函数,明显的栈溢出 ...