JSX 到 JS 的转换
<div></div>
"use strict";
React.createElement("div", null);
在左边我们声明了html的标签,他在右边会返回一个我们在react当中我们需要返回的一个对象。这就是 JSX 到 JS 的一个转换过程
我们会发现通过这种标签写的,他最终都会转换成 React.createElement 。里面的标签名,属性,内容都会通过参数给他。
<div id='div' key='key'>test</div>
React.createElement("div", {
id: "div",
key: "key"
}, "test");
会把所有的属性放在第二个参数,第二个参数是个对象,都会加在这个对象里面给他。第三个参数在 React 中称为 children ,也就是标签内容
<div id='div' key='key'>
<span>spanTest</span>
</div>
React.createElement("div", {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"));
因为span他也是标签,所有第三个参数传内容的地方,再次将标签转换成 React.createElement 。
<div id='div' key='key'>
<span>spanTest</span>
<span>spanTest</span>
</div>
React.createElement("div", {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"),
React.createElement("span", null, "spanTest"));
会发现第三个以后都是节点,多少个节点,后面就多少个 React.createElement 。这就是 JSX 转换成 JS 的样子。在这里我们看到第一个参数是个字符串。那么如果这个不是个标签,是个组件,他会怎么样呢?
function Comp() {
return <a>123</a>
} <Comp id='div' key='key'>
<span>spanTest</span>
<span>spanTest</span>
</Comp>
右边
function Comp() {
return React.createElement("a", null, "123");
} React.createElement(Comp, {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"), React.createElement("span", null, "spanTest"));
这个时候发现就不再是字符串,而是以变量的方式传递进来。值得注意的是。在目前的babel插件里面,在转化的过程当中,会根据大小写判断。小写认为是原生的html标签,就是以字符串的形式传递,如果是大写,就认为是组件,当做变量传递
JSX 到 JS 的转换的更多相关文章
- Js 日期转换函数(UTC时间转换及日期想加减)
IOS上Js日期转换中new Date("yyyy-mm-dd")不能正常工作,必须使用new Date("yyyy/MM/dd"); 日期相加减: Date. ...
- js数值转换
先来几个题吧: var num1 = Number("123blue");var num2 = Number("");var num3 = Number([]) ...
- JavaScript进阶(四)js字符串转换成数字的三种方法
js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- Js强制转换
Js强制转换 ParseInt(a,b):整型 只能放字符串,b为基数.声明前面的数是几进制.因为只能放字符串,所以无论放什么都转换为字符串: 如果String以0x开头则为16进制的整数: ‘036 ...
- js字符串转换成数字与数字转换成字符串的实现方法
转载:点击查看地址 js字符串转换成数字 将字符串转换成数字,得用到parseInt函数.parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseInt(' ...
- js字符串转换成数字,数字转换成字符串
转自网络,忘记出处了. js字符串转换成数字 将字符串转换成数字,得用到parseInt函数. parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseIn ...
- js时间戳转换日期
//js时间戳转换日期function formatDate(now) { var year=now.getFullYear(); var month=now.getMonth()+1; var da ...
- js字节转换、字节格式化函数
有时候在上传附件后需要显示大小,可以选择在后台处理,也可以在前台用js处理. 比如我们想1024MB转换成1GB,那就需要进行转换,这里只是介绍用js进行转换. function bytesToSiz ...
随机推荐
- All LeetCode Questions List 题目汇总
All LeetCode Questions List(Part of Answers, still updating) 题目汇总及部分答案(持续更新中) Leetcode problems clas ...
- shell中 >/dev/null 2>&1是什么意思
原文地址:http://juke.outofmemory.cn/entry/295292 我们经常能在 shell 脚本中发现 >/dev/null 2>&1 这样的语句.以前的我 ...
- [ARM-Linux开发]Linux下加载.ko驱动模块的两种方法:insmod与modprobe
假设要加载的驱动程序模块名为SHT21.ko 加载驱动模块 方法一: 进入SHT21.ko驱动模块文件所在的目录,然后直接 insmod SHT21.ko 即可 方法二: 将SHT21.ko文 ...
- 阿里云 安装docker
转 https://www.jianshu.com/p/f02d63ee98e0
- springboot结合日志门面SLF4j和日志实现Logback的使用
一.此处主要介绍在springboot工程下如何使用 logback + slf4j 进行日志记录. logback主要包含三个组成部分:Loggers(日志记录器).Appenders(输出目的在 ...
- 测试代码的练习2——python编程从入门到实践
11-3 雇员:编写一个名为Employee的类,其方法__init__() 接受名.姓和年薪,并将它们都存储在属性中.编写一个名为give_raise()的方法,它默认将年薪增加5000美元,但也能 ...
- javascript document.createElement() document.createTextNode() appendChild()
//--------------document.createElement("div") var div = document.createElement("div&q ...
- Equalizing Two Strings CodeForces - 1256F (思维)
大意: 给定两个串$s,t$, 每次操作任选长度$len$, 分别翻转$s,t$中一个长$len$的子串, 可以进行任意次操作, 求判断能否使$s$和$t$相同. 字符出现次数不一样显然无解, 否则若 ...
- vue-cli输入命令vue ui没效果
最近用vue-cli脚手架很顺口,特别是UI控制台,在这里,创建项目和搭建本地环境,连接服务端变得很容易,页面ui也是一流 要怎么启动呢?在终端输入命令行vue ui,启动UI控制台,然后往浏览器输入 ...
- WPF 程序鼠标在窗口之外的时候,控件拿到的鼠标位置在哪里?
原文:WPF 程序鼠标在窗口之外的时候,控件拿到的鼠标位置在哪里? 在 WPF 程序中,我们有 Mouse.GetPosition(IInputElement relativeTo) 方法可以拿到鼠标 ...