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 ...
随机推荐
- html5 video标签播放视频流
从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...
- 【ML基础】t-SNE(t-distributed stochastic neighbor embedding)原理及推导
前言 参考 1. t-SNE原理与推导: 完
- ng2 空标签
<ng-container *ngIf="v.products"> <li class="clearfix" *ngFor="let ...
- [PHP] Laravel 体现 MySQL、Sqlite 数据的大小写敏感
要想实现数据比对的大小写敏感,方式是设置数据库字段类型 或者 字段校验字符集. MySQL 和 Sqlite 所支持的 collations 形式是不同的,你可以通过以下文档了解到. MySQL co ...
- 启动Oracle 12c数据库实例
启动Oracle 12c数据库实例 启动Oracle数据库实例,主要分为两步:第一步,启动监听:第二步,启动数据库实例. 1. 切换到oracle用户- su oracle- cd - source ...
- [IISNode] 如何在IIS7/8下,配置一个可以通过IIS访问NodeJS的web项目
参考了一下几篇很给力的文章,在每篇文章中,都学到了解决遇到的问题的答案: (1)用iisnode模块,让你的Node.js应用跑在Windows系统IIS中 (2)让IIS能够运行Nodejs (3) ...
- Redis Sentinel分布式集群
helm部署Redis哨兵分布式集群 Redis Sentinel集群 介绍 Redis Sentinel集群是由若干Sentinel节点组成的分布式集群,可以实现故障发现.故障自动转移.配置中心和客 ...
- activiti学习3:流程引擎对象和流程引擎配置对象
目录 activiti学习3:流程引擎对象和流程引擎配置对象 一.activiti的简单使用流程 二.流程引擎配置对象ProcessEngineConfiguration的介绍 三.activiti配 ...
- 推荐系统中的协同滤波算法___使用SVD
对于推荐方法,基于内容 和 基于协同过滤 是目前的主流推荐算法,很多电子商务网站的推荐系统都是基于这两种算法的. 协同过滤 是一种基于相似性来进行推荐的算法,主要分为 基于用户的协同过滤算法 和 基于 ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...