第一种

字符串拼接

<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. 8个华丽而实用的Java图表类库

    8个华丽而实用的Java图表类库 转 https://www.300168.com/yidong/show-2744.html   核心提示:学习Java的同学注意了!!! 学习过程中遇到什么问题或者 ...

  2. labelimg data

    <annotation> <folder>img_data_box_1500</folder> <filename>798.jpg</filena ...

  3. activity 工作流

    https://blog.csdn.net/cs_hnu_scw/article/details/79059965 https://blog.csdn.net/xnf1991/article/deta ...

  4. git命令手册

    以下内容是我在学习和研究Git时,对Git操作的特性.重点和注意事项的提取.精练和总结,可以做为Git操作的字典,方便大家查阅: 备注:本文会不断更新完善: 目录 一. 语法格式描述 二. git环境 ...

  5. Docker 镜像小结---操作指令介绍(七)

    目录 一.搜索镜像 二.下载镜像 三.查看本地镜像 四.显示镜像构建历史 五.删除镜像 六.镜像创建 七.上传镜像 八.给镜像打 tag 九.存出和载入镜像 一.搜索镜像 很多情况下我们可能需要下载某 ...

  6. 如何使用 AWS Auto Scaling 按需动态增加和减少实例

    目录 一.背景需求 二.配置步骤 2.1.创建 AMI 2.2.创建负载均衡目标组 2.3.创建 Classic Load Balancer 2.4.创建启动配置 2.5.创建 Auto Scalin ...

  7. eclipse修改java类时不自动重启

    只有添加修改方法参数等重启 在方法里修改不重启 最后保存,Ctrl+S

  8. solr后台【web页面】增删改查

    就是在下面这个页面操作 增加 {"id":"2", "name": "添加"} 查询 id:2 修改 {"id ...

  9. python 实现快速排序(面试经常问到)

    # -*- coding: UTF-8 -*- # 递归实现, 把过程打印出来便于理解 def quick_sort1(lis, start, end): if start >= end: re ...

  10. C#基础知识学习 三