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. 《Cracking the Coding Interview》——第5章：位操作——题目6

    2014-03-19 06:24 题目:将一个整数的奇偶二进制位交换,(0, 1) (2, 3) ... 解法:使用掩码来进行快速交换,定义掩码为'0101...'和‘1010...’. 代码: // ...

  2. windows上php环境下memcache和mongodb的安装

    mangodb安装 1. 下载mongodb的安装文件,我安装的windows 64位的,下载地址如下: https://fastdl.mongodb.org/win32/mongodb-win32- ...

  3. 洛谷P2678跳石头(提高)

    题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点. 在起点和终点之间,有 N 块岩石( ...

  4. 1064 Complete Binary Search Tree （30 分）（二叉查找树）

    中序遍历建树 #include<bits/stdc++.h> using namespace std; ; int s[N]; int n; int tree[N]; int cnt; v ...

  5. ImportError: dynamic module does not define module export function (PyInit__caffe)

    使用python3运行caffe,报了该错误. 参考网址:https://stackoverflow.com/questions/34295136/importerror-dynamic-module ...

  6. Codeforces Round #327 (Div2) A~E

    CodeForces 591A 题意:在距离为L的两端A,B,相向发射魔法,a(以P1的速度)-->B,A<--b(以P2的速度).假设a-->B,途中相遇,则返回到原点A<- ...

  7. fragment中的WebView返回上一页

    public final class Text1Fm extends Fragment { static WebView mWeb; private View mContentView; privat ...

  8. 【JAVA进阶】——myEclipse连接mysql启动数据库服务

    背景: DRP项目要求使用Oracle数据库,但目前由于种种原因,暂时还装不了Oracle.但也不能闲着啊,就拿mysql来试试.安装完mysql以后,使用myEclipse连接数据库,就一直报错,报 ...

  9. VMware 密匙

    11.0版本 1F04Z-6D111-7Z029-AV0Q4-3AEH8 亲测可用

  10. [洛谷P4151][WC2011]最大XOR和路径

    题目大意:给你一张$n$个点$m$条边的无向图,求一条$1->n$的路径,使得经过路径值的异或值最大(重复经过重复计算) 题解:某条路$k$被重复走了两次,那么它的权值对答案的贡献就是$0$,但 ...