ES6新增的不少语法都是极好用的，

在拼接变量与字符串时，模版字符串``就是典型的用法

以下是2种写法

 <div className={"bubble-box" +' '+`${item.class}`} key={index} style={{left:`${item.left}px`,top:`${item.top}px`}}><img className={`${item.class}`} src={item.src} /></div>

 <div className={"bubble-box" +' '+(item.class)} key={index} style={{left:`${item.left}px`,top:`${item.top}px`}}><img className={`${item.class}`} src={item.src} /></div>

react className的2种变量写法的更多相关文章

  1. 总结 React 组件的三种写法 及最佳实践 [涨经验]

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...

  2. 总结 React 组件的三种写法 及最佳实践

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...

  3. SQL Server 存储过程中处理多个查询条件的几种常见写法分析，我们该用那种写法

    本文出处: http://www.cnblogs.com/wy123/p/5958047.html 最近发现还有不少做开发的小伙伴,在写存储过程的时候,在参考已有的不同的写法时,往往很迷茫,不知道各种 ...

  4. 代码片段--Makefile之大型工程项目子目录Makefile的一种通用写法

    转载:http://blog.csdn.net/mo_hui123456/article/details/8929615 管理Linux环境下的C/C++大型项目,如果有一个智能的Build Syst ...

  5. Makefile之大型工程项目子目录Makefile的一种通用写法

    管理Linux环境下的C/C++大型项目,如果有一个智能的Build System会起到事半功倍的效果,本文描述Linux环境下大型工程项目子目录Makefile的一种通用写法,使用该方法,当该子目录 ...

  6. Makefile之大型工程项目子目录Makefile的一种通用写法【转】

    转自:http://www.cnblogs.com/skyofbitbit/p/3680753.html 管理Linux环境下的C/C++大型项目,如果有一个智能的Build System会起到事半功 ...

  7. SQL Server 存储过程的几种常见写法分析，我们该用那种写法

    本文出处: http://www.cnblogs.com/wy123/p/5958047.html 最近发现还有不少做开发的小伙伴,在写存储过程的时候,在参考已有的不同的写法时,往往很迷茫,不知道各种 ...

  8. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  9. JMeter学习-032-JMeter常见四种变量简介

    在JMeter自动化测试脚本编写过程中,经常需要对测试脚本进行一些参数设置.例如,设置测试计划的全局变量(方便切换不同的测试环境).样本线程(HTTP请求等)的参数传递等. 通常,JMeter中常用的 ...

随机推荐

  1. Visual Studio Emulator for Android 折腾记

    想用虚拟机调试Android项目,于是想到了MS免费提供的 Visual Studio Emulator for Android,这玩意价格免费量又足,N久之前试用过,速度杠杠的! 安装包很小,不到4 ...

  2. ios在tableview里面加subview后在ip4和ip5上显示不一样的问题

    文章链接:http://quke.org/post/ios-tableview-addsubview-height.html (转载时请注明本文出处及文章链接) 我在在tableview里面加subv ...

  3. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

  4. maven常用命令 与语法

    pom.xml 中个元素的意义 groupId 规定了这个项目属于哪个组,或者公司之类的 artifactId 定义了当前maven项目在组中唯一的ID version 版本号 常用命令 mvn co ...

  5. 【转载】Unity3D研究院transform.parent = parent坐标就乱了

    昨天有朋友问我了一个问题,它将Hierarchy视图里的某个子节点下的GameObject拷贝到另外一个对象的子节点下面,他使用的方法就是 transform.parent = parent 但是拷贝 ...

  6. ironic-conductor与ipa交互clean部分代码分析

    clean的动作会在provide和delete阶段才会触发 从代码分析: 对节点执行的node provide/deleted/clean会先发送到ironicclient ironicclient ...

  7. leetcode_day01

    任务一:有效的括号 题目链接:https://leetcode-cn.com/problems/valid-parentheses/ 自己的答案: class Solution: def isVali ...

  8. Linux中awk后面的RS, ORS, FS, OFS 含义

    转载自http://blog.csdn.net/qq416647781/article/details/40649419   一.RS 与 ORS 差在哪   我们经常会说,awk是基于行列操作文本的 ...

  9. 第二阶段团队冲刺-seven

    昨天: 合并程序(添加打印txt). 今天: 整体调试程序继续优化. 遇到的问题: 解决前两天的问题.

  10. Axure+SVN——实现多人团队开发

    最近进行考试系统重构,一个小组十几个人,这么多人要同时搞需求画原型.这样原本的合作开发工具SVN已经不能满足现在的需求了,这是就找到了一个新的方法--Axure+SVN. 在SVN服务器端建立一个空的 ...