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 相关文章推荐
javascript 终止函数执行操作
Feb 14 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
vue实现购物车小案例
Sep 27 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
JS制作简易计算器的实例代码
Jul 04 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
一个数据采集类
2007/02/14 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
js轮播图代码分享
2016/07/14 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python类和继承用法实例
2015/07/07 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python 6种方法实现单例模式
2020/12/15 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
校园招聘策划书
2014/01/09 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
预防煤气中毒方案
2014/06/16 职场文书
爱国口号
2014/06/19 职场文书
会议通知范文
2015/04/15 职场文书
个人原因辞职信模板
2015/05/13 职场文书
治庸问责工作总结
2015/08/11 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
Android中View.post和Handler.post的关系
2022/06/05 Java/Android