第一种

字符串拼接

<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. 使用java自带线程池

    java提供自带的线程池,而不需要自己去开发一个自定义线程池了. 线程池类ThreadPoolExecutor在包java.util.concurrent下   ThreadPoolExecutor ...

  2. Day6作业:计算器

    嗯,稀里糊涂就居然写完了...... readme: 程序说明: 此计算器比较简单,只支持普通的加减乘除和小括号,不支持[],{},求幂之类的均不支持! 测试过的字符串: -1/2*((60-30+( ...

  3. python中计算上个月和下个月的第一天的方法

    闹腾,一个简单的东西复杂化了,记录下吧: import datetime,time def get_1st_of_last_month(): """ 获取上个月第一天的日 ...

  4. 【微信小程序】wx.navigateBack() 携带参数返回

    第一个页面: go_pick_time:function(e){ var that = this; var type = e.currentTarget.dataset.type; wx.naviga ...

  5. CYLTabBarController的简单使用

    #pragma mark- 登录成功跳转至主页 -(void)jumpToMainVC { [UIApplication sharedApplication].statusBarStyle = UIS ...

  6. 聊聊Docker理论知识(二)

    目录 一.什么是Dcoker 二.Docker的三大核心概念 1.镜像(Image) 2.容器(Container) 3.仓库(Repository) 三.Docker架构组成 四.Docker的技术 ...

  7. 【c# 学习笔记】类与结构体的区别

    由于类与结构体在语法和使用上都非常类似,导致我们这些初学者容易混淆.为更好理解,特做以下区分记录: ① 语法上的区别在于,定义类要使用关键词class,而定义结构体则使用关键词struct. ② 结构 ...

  8. Python sys.path永久添加

    在用户目录下,找到隐藏文件.bashrc 或 .zshrc 文件然后在末尾添加 export PYTHONPATH=$PYTHONPATH:/home/dev/custom_path 操作:vim . ...

  9. charles 查找

    本文参考:charles 查找 查找设置 界面如上图,也没啥好说的: 这个还是非常常用的:需要了解 界面如上图,也没啥好说的: 这个还是非常常用的:需要了解 查找需要了解的关键字是: 查找的内容 正则 ...

  10. 打印网页js

    ====================================设置打印样式 <style media="print"> .Noprint { display: ...