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》——第13章：C和C++——题目9

    2014-04-25 20:37 题目:请设计一个字节对齐的malloc函数,配套上对应的free函数.要求这个函数分配出的内存块儿的首地址是某个值n的整数倍,n是2的整次幂,比如128.1024之类 ...

  2. DOS程序员手册（九）

    第14章参考手册概述     本书余下的章节将向读者们介绍BIOS.DOS各种各样API函数和服务,作为一名程 序员,了解和掌握这些知识是很有好处的.在所介绍的参考手册中,每部手册都汇集了大 量的资源 ...

  3. 【Java】Java JDK 安装及环境配置

    安装包下载: Java Platform (JDK) 11 https://www.oracle.com/technetwork/java/javase/downloads/index.html 安装 ...

  4. python基础实践（一）

    -*-纸上得来终觉浅,绝知此事要恭行.-*-# -*- coding:utf-8 -*-# Author:sweeping-monkname = "什么是字符串?"What_is_ ...

  5. 转：npm install 时总是报phantomjs-prebuilt@2.1.14安装失败

    该文章转自:http://www.cnblogs.com/alice626/p/6206722.html 在npm install时总是报如下错误, 尝试单独安装:npm install phanto ...

  6. Arcgis桌面开发，Python引用GDAL库的方法

    我用的是arcgis10.2,python版本是arcgis自动安装的Pythin2.7 1.下载gdal-111-1700-core.msi和对应的GDAL-1.11.1.win32-py2.7.m ...

  7. [洛谷P1792][国家集训队]种树

    题目大意:给出由$n$个数组成的环,取某个数就可以得到它的分数,相邻的两个数不能同时取.问取$m$个数可以得到的最大分数. 题解:建一个大根堆,贪心取,每个点记录前驱后继,取一个点就把前驱后继设成不能 ...

  8. [bzoj4945][Noi2017]游戏

    题目大意:有$n$个位置,有三种数,每个位置只可以填一种数,$d(d\leqslant8)$个位置有三种选择,其他位置只有两种选择.有一些限制,表示第$i$个位置选了某种数,那么第$j$个位置就只能选 ...

  9. POJ A Simple Problem with Integers | 线段树基础练习

    #include<cstdio> #include<algorithm> #include<cstring> typedef long long ll; #defi ...

  10. position:absolute和float隐式改变display为inline-block

    不论之前是什么类型的元素(display:none除外), 只要设置了position:absolute或float, 都会让元素以display:inline-block的方式显示, 可以设置长宽, ...