第一种

字符串拼接

<i className={["iconfont"+" "+item.icon]} ></i>

　　

第二种

有判断条件的

<i className={["iconfont ",isRed ?item.icon :'' ].join('')} ></i>

第三种

使用ES6 模板字符串

<i className={`iconfont ${isRed ?item.icon :'' }`} ></i>

React/动态绑定class的更多相关文章

  1. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  2. 航遇项目react踩坑

    1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态 ...

  3. react初探（一）之JSX、状态（state）管理、条件渲染、事件处理

    前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue.在实际项目中只使用过一次angular5,其余项目都是使用Vue写的.写篇 ...

  4. React Native ——入门环境搭配以及简单实例

    一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent. ...

  5. React应该如何优雅的绑定事件？

    前言 由于JS的灵活性,我们在React中其实有很多种绑定事件的方式,然而,其实有许多我们常见的事件绑定,其实并不是高效的.所以本文想给大家介绍一下React绑定事件的正确姿势. 常见两种种错误绑定事 ...

  6. react脚手架和深入理解jsx语法

    react的mvc和vue的mvvm vue的mvvm属于双向绑定,view层,model数据层,vm实现双向绑定的控制层 此种模式,再某一类项目种很有优势:管理系统 ( OA, ERP , CRM ...

  7. react之路由

    功能:让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系 使用React路由简单来说,就是配置路径和组件 路由的使用 1.安装路由 ...

  8. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  9. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

随机推荐

  1. SpringCloud学习成长 四 断路器（Hystrix）

    在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...

  2. python中的列表推导式——轻量级循环

    列表推导式(list comprehension)是利用其他列表创建新列表(类似于数学术语中的集合推导式)的一种方法.它的工作方式类似于for循环,也很简单. 列表推导式书写形式: [表达式 for ...

  3. Spark2.x学习笔记：5、Spark On YARN模式

    https://blog.csdn.net/chengyuqiang/article/details/77864246

  4. Spring Cloud(7.3)：配置Consumer Server

    接下来我们创建一个消费者服务.消费者服务从生产者服务拿取商品-价格信息,并保存在Redis中.同时,接收消息队列中生产者服务的更新提示,如果某个商品-价格被修改,则删除Redis中的缓存数据,并重新从 ...

  5. 【笔记】Docker部署Nginx，并修改配置文件

    先来一个删除命令:) root@fudonghai:~# rm -rf /usr/docker/nginx/{conf.d,html,log} root@fudonghai:~# rm -r /usr ...

  6. WIN10激活教程,亲测，有效

    WIN10激活教程: 1.打开开始菜单,找到设置,点开“更新和安全”,切换到“激活”选项卡,查看到当前系统的激活状态 2.在搜索框输入“CMD”,出现“命令提示符”工具时,右击选择“以管理员身份”运行 ...

  7. Windows Server 2012 R2蓝屏

    最近发现某个医院客户Windows Server 2012 R2 DataCenter的系统频繁蓝屏重启,重启没过一天再一次出现,反反复复折腾好几天,提示信息ntoskrnl.exe.mssmbios ...

  8. php 因循环数据 赋值变量 占用内存太大 提示错误

    Fatal error: Allowed memory size of 134217728 bytes exhausted 网上很多解决方法:就简单记录下 一个csv导入功能 由于数据太多 占用内存太 ...

  9. ul根据后台添加li，并在点击li时，颜色随之变化

    在我们大多数时候都是通过<ul><li>...</li></ul>来实现同级的加载,但是也用很多时候li里的内容是不固定的.需要根据后台返回数据来生成. ...

  10. JavaSE基础（一）--初识Java

    Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式 ...