通过在线babel转换器,转换出jsx是如何变成js对象的

jsx文件

加入了正常的标签以及嵌套标签以及方法属性

function hello() {
click=()=>{
console.log("hello")
}
return <div>
<button onclick={this.click.bind(this)}>
helloWorld
</button>
</div>;
}

通过babel转换之后

"use strict";

function hello() {
click = function click() {
console.log("hello");
}; return React.createElement("div", null, React.createElement("button", {
onclick: this.click.bind(this)
}, "helloWorld"));
}

在线babel编辑器 测试

react中jsx文件是如何转换成js对象的的更多相关文章

  1. legend---八、php对象如何转换成js对象

    legend---八.php对象如何转换成js对象 一.总结 一句话总结:a.直接转换:b.通过json对象做中间桥梁 1.为什么传递给父亲构造函数的参数不能写默认值? 这里的第三行的比如$type不 ...

  2. python3.6 + selenium2.53.1 查询数据库并将返回的内容中每一行的内容转换成class对象

    环境: win10 python3.6 selenium2.53.1 准备工作:先安装pymysql python2.x链接数据库使用MySQLdb,而python3.x链接数据库使用pymysql ...

  3. WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片

    原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...

  4. React中JSX的理解

    React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...

  5. ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系(从WKID=4326到WKID=102100)

    原文:ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系(从WKID=4326到WKID=102100) 对于非地理专业的开发人员,对与这些生涩的概念,我们不一定都要了解,但是我们要理解,凡是 ...

  6. Altium Designer 从导入DXF文件,并转换成板框

    大多数人都知道,PADS中导入DXF文件,然后转换成板框,是很方便的.AD也同样可以做到. PADS导入DXF见:http://www.cnblogs.com/craftor/archive/2012 ...

  7. C#将image中的显示的图片转换成二进制

    原文:C#将image中的显示的图片转换成二进制 1.将Image图像文件存入到数据库中 我们知道数据库里的Image类型的数据是"二进制数据",因此必须将图像文件转换成字节数组才 ...

  8. jQuery、JS读取xml文件里的内容(JS先通过document.implementation.createDocument方法将xml转换成document对象,jQuery将读取到的xml转成table)

    xml文件:test.xml <?xml version="1.0"?> <note> <to>George</to> <fr ...

  9. delphi 文件或目录转换成 TreeView

    //文件或目录转换成 TreeViewprocedure DirToTreeView(Tree: TTreeView; Directory: string; Root: TTreeNode; Incl ...

随机推荐

  1. GitHub回退到某个commit版本

    首先查看commit日志 git log 复制你想回退到的commit版本的commit_id,也就是图中圈出来的一大串字符. 将本地回退 git reset --hard commit_id 将远程 ...

  2. java Calendar 小时值得到24进制格式

    Calendar cal = Calendar.getInstance(); cal.get(Calendar.HOUR_OF_DAY)

  3. 【转载】微信小程序-开发入门(一)

    微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应用场景(用完即走和二维码分发等)还是很值 ...

  4. HttpClient结合PostMethod调用接口

    HttpClient结合PostMethod调用接口   解决方法: HttpClient client = new HttpClient(); PostMethod post = new PostM ...

  5. 常用SQL50句

    Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表 问题 ...

  6. SpringBoot集成tk mybatis插入数据,回显主键为null

    实体信息如下 @Data public class ApiCertificate{ @Id @GeneratedValue(generator = "JDBC") private ...

  7. 小程序scroll-view 使用

    <scroll-view class="box" scroll-x="true" > <view </view> <view ...

  8. 浅析 c# Queue

    1.Queue定义 System.Collections.Queue类表示对象的先进先出集合,存储在 Queue(队列) 中的对象在一端插入,从另一端移除. 2.优点 1.能对集合进行顺序处理(先进先 ...

  9. 【Leetcode_easy】1108. Defanging an IP Address

    problem 1108. Defanging an IP Address solution: class Solution { public: string defangIPaddr(string ...

  10. ADFS2016和ADFS代理的安装与配置

    一,ADFS安装教程 教程链接(包含安装和配置两个步骤): https://www.virtuallyboring.com/how-to-setup-microsoft-active-director ...