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. 为 DirectAccess 设计 DNS 基础结构

    TechNet 库Windows ServerWindows Server 2008 R2 und Windows Server 2008浏览 Windows Server 技术NetworkingD ...

  2. 剑指Offer - 九度1373 - 整数中1出现的次数（从1到n整数中1出现的次数）

    剑指Offer - 九度1373 - 整数中1出现的次数(从1到n整数中1出现的次数)2014-02-05 23:03 题目描述: 亲们!!我们的外国友人YZ这几天总是睡不好,初中奥数里有一个题目一直 ...

  3. USACO Section1.2 Transformations 解题报告

    transform解题报告 —— icedream61 博客园(转载请注明出处)------------------------------------------------------------ ...

  4. loadrunner检查点设置失败，日志中SaveCount无法被正常统计出来

    在脚本正确的情况下的web_reg_find检查点检查失败,SaveCount无法被正常统计出来. 在检查项Text为中文的情况下, ******(我是被录制下来的代码) web_reg_find(& ...

  5. python学习总结----时间模块 and 虚拟环境（了解）

    time - sleep:休眠指定的秒数(可以是小数) - time:获取时间戳 # 获取时间戳(从1970-01-01 00:00:00到此刻的秒数) t = time.time() print(t ...

  6. Scrapy 学习笔记（一）数据提取

    Scrapy 中常用的数据提取方式有三种:Css 选择器.XPath.正则表达式. Css 选择器 Web 中的 Css 选择器,本来是用于实现在特定 DOM 元素上应用花括号内的样式这样一个功能的. ...

  7. （转）详解JavaScript模块化开发

    https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...

  8. 移动平台自动化测试：appium(二)

    环境搭建.本环境基于win7_x64搭建 安装环境需要用到的工具清单: android sdk:https://developer.android.com/studio/index.html Appi ...

  9. 如何在CentOS7上改变网络接口名

    如何在CentOS7上改变网络接口名 传统上,Linux的网络接口被枚举为eth[0123...],但这些名称并不一定符合实际的硬件插槽,PCI位置,USB接口数量等,这引入了一个不可预知的命名问题( ...

  10. Window系统命令行调用控制面板程序

    Window系统命令行调用控制面板程序 control.exe /name microsoft.folderoptions 启动资源管理器的 文件夹属性 选项卡 control.exe /name M ...