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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JS实现图片切换特效
Dec 23 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
Element Card 卡片的具体使用
Jul 26 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
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
node.js中watch机制详解
2014/11/17 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python定时关机小脚本
2018/06/20 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
遵纪守法演讲稿
2014/05/23 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
忠诚教育心得体会
2014/09/03 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2014年老干部工作总结
2014/11/21 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
运动会新闻报道稿
2015/07/22 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
护理自荐信
2019/05/14 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL