通过在线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. 2019 DDCTF 部分writeup

    网上的wp已经很多了,但wp普遍很简略.我尽量写的详细一点. 一.WEB 滴~ 拿到题目后首先右键查看源代码,发现图片是以base64传送的 而且看url发现里面应该是包含了文件名,并且用了某个编码. ...

  2. Flutter移动电商实战 --(40)路由_Fluro的全局注入和使用方法

    路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是MaterialApp自带的路由配置项, 首页跳转到详细 ...

  3. nginx反向代理部署vue项目(history模式)的方法

    前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...

  4. vue + elementui form resetFields方法 无法重置表单

    this.$refs['form'].resetFields(); 方法无法重置.1 el-form 组件 没有添加 ref 属性 <el-form ref="form" : ...

  5. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  6. YApi内部部署文档

    旨在为开发.产品.测试人员提供更优雅的接口管理服务.可以帮助开发者轻松创建.发布.维护 API 1.安装Node.js环境(7.6+) 1.官网下载适合的nodejs版本放置在/usr/package ...

  7. win7 安装 IIS 配置ASP 【原创】

    1.安装https://jingyan.baidu.com/article/5553fa8215f7ef65a2393413.html2.测试localhost  打开测试没问题3.配置网站--添加站 ...

  8. jsp中用java代码拼接下拉选备选项及默认值【我】

    <th id="TD_N_CERTIFICATION_TYPE" >证件类型:</th> <td > <select id="C ...

  9. 36 Flutter仿京东商城项目 用户登录 退出登录 事件广播更新状态

    Login.dart import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:flutter/material.da ...

  10. React——嵌入已有项目 && jsx

    Add React to a Website React has been designed from the start for gradual adoption, and you can use ...