JavaScript的React框架中的JSX语法学习入门教程


Posted in Javascript onMarch 05, 2016

什么是JSX?

在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和组件之间的关系看上去更加清晰。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

一个XML标签,比如<MyComponent someProperty={true} />会被JSX转换工具转换成什么呢?

比如:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

会被转化为:

var Nav = React.createClass({/*...*/});
var app = React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

那么也就是说,我们写一个XML标签,实质上就是在调用React.createElement这个方法,并返回一个ReactElement对象。

ReactElement createElement(
 string/ReactClass type,
 [object props],
 [children ...]
)

这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。

JSX转化器

要把带有JSX语法的代码转化为纯Javascript代码,有多种方式,对于内联与HTML中的代码或者是未经过转化的外部文件,在script标签中要加上type="text/jsx",并引入JSXTransformer.js文件即可,不过这种方式并不建议在生产环境使用,建议的方法是在代码上线前就将代码转换好,可以使用npm全局安装react-tools:

npm install -g react-tools

并使用命令行工具转化即可(具体用法可以参考jsx -h):

jsx src/ build/

如果使用自动化工具,比如gulp的话,可以使用相应插件gulp-react。

HTML模板中使用JS

在HTML模板中使用JS非常方便,只需要用大括号把JS代码括起来即可。

var names = ['Alice', 'Emily', 'Kate']; 
 
React.render( 
<div> 
{ 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
);

编译出来就变成了这样:

var names = ['Alice', 'Emily', 'Kate']; 
React.render( 
 React.createElement("div", null, names.map(function (name) { 
 return React.createElement("div", null, "Hello, ", name, "!") 
 }) ), 
 document.getElementById('example') 
);

要注意的是,大括号实际就是一个变量输出表达式,JSX最终就是直接把花括号中的内容作为 React.createElement 的第三个参数直接传入了(没有任何修改直接传入),所以其中只能放一行表达式,并且任何不能直接作为第三个参数的写法都是错的,那么你这样写就是错的:

React.render( 
<div> 
{ 
var a = 1; 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
);

因为很明显其中花括号内的内容直接放在第三个参数上,语法不对。

这么写也是错的:

React.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getElementById('example') 
);

因为 React.createElement(“div”, null, var a = 1;) 是语法错误。
那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。

需要注意的是,如果你在属性中输出JS变量,是不能加引号的,不然会被当做字符串而不被解析。
应该是这样:

<a title={title}>链接</a>

使用HTML标签

要创建一个HTML标准中存在的元素,直接像写HTML代码一样即可:

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

不过需要注意的是class和for这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样,用className和htmlFor。

还有一点是,在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加data-前缀。

<div data-custom-attribute="foo" />

命名空间式组件

比如开发组件的时候,一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:

var Form = MyFormComponent;

var App = (
 <Form>
 <Form.Row>
  <Form.Label />
  <Form.Input />
 </Form.Row>
 </Form>
);

这样你只需将子组件的ReactClass作为其父组件的属性:

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

而创建子元素可以直接交给JSX转化器:

var App = (
 React.createElement(Form, null,
  React.createElement(Form.Row, null,
   React.createElement(Form.Label, null),
   React.createElement(Form.Input, null)
  )
 )
);

该功能需要0.11及以上版本

Javascript表达式

在JSX语法中写Javascript表达式只需要用{}即可,比如下面这个使用三目运算符的例子:

// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
 Container,
 null,
 window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

不过要注意的是,JSX语法只是语法糖,它的背后是调用ReactElement的构造方法React.createElement的,所以类似这样的写法是不可以的:

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

可以从转化后的Javascript代码中看出明显的语法错误,所以要不用三目运算符,要不就这样写:

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

传播属性(Spread Attributes)

在JSX中,可以使用...运算符,表示将一个对象的键值对与ReactElement的props属性合并,这个...运算符的实现类似于ES6 Array中的...运算符的特性。

var props = { foo: x, bar: y };
var component = <Component { ...props } />;

这样就相当于:

var component = <Component foo={x} bar={y} />

它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
Javascript 相关文章推荐
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
JavaScript中的继承之类继承
May 01 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 #Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 #Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 #Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 #Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 #Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 #Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php 获取全局变量的代码
2011/04/21 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python更改已存在excel文件的方法
2018/05/03 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python日志器使用方法及原理解析
2020/09/27 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
基于PyTorch中view的用法说明
2021/03/03 Python
自我鉴定怎么写
2014/01/12 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书