React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487
什么是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标签
要创建一个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'
参考资料(可能无法直接打开链接)
React JSX语法说明的更多相关文章
- 2. React JSX语法及特点介绍
什么是JSX JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...
- React(JSX语法)-----JSX基本语法
JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- React(JSX语法)----动态UI
1.React honws how to bubble and capture events according to the spec,and events passed to your event ...
- React(JSX语法)----JSX拼写
注意:For DOM differences,such as the inline style attribute,check here. // bad: it displays "FIrs ...
- React(JSX语法)-----JSX属性
1. if you know all the propertities that you want to place on a component ahead of time,it is easy t ...
- 22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
- Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办
2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
随机推荐
- BZOJ 1799 同类分布
一开始没想出来..一看题解 我艹直接枚举数位的和啊.....怪不得给50s. 还是太蠢. #include<iostream> #include<cstdio> #includ ...
- 关于git 操作
一. Git 命令初识 在正式介绍Git命令之前,先介绍一下Git 的基本命令和操作,对Git命令有一个总体的认识 示例:从Git 版本库的初始化,通常有两种方式: 1)git clone:这是一种较 ...
- Reverse-Daily(3)-DotNetCrackMe1
链接:http://pan.baidu.com/s/1cuYQhK 密码:zjx6 这是一个用c#编写的程序 用dotpeek或者ILSPY反编译可以看到程序结构,主体比较简单,是一个des加密 ...
- BZOJ 1468 树分治
求出子树的重心后求出它每个子节点的距离,排序后就可以统计距离小于等于K的点对的个数了,但是会在同一子树内重复,然后在每个子树里面减去小于等于K的点对个数就可以了. #include <iostr ...
- HDU 4691 正解后缀数组(暴力也能过)
本来是个后缀数组,考察算法的中级题目,暴力居然也可以水过,就看你跳不跳坑了(c++和G++返回结果就很不一样,关键看编译器) 丝毫不差的代码,就看运气如何了.唯一差别c++还是G++,但正解是后缀数组 ...
- 关于JAVA学习计划和感想
学习计划第一阶段: JAVA语言基础知识.包括异常.IO流.多线程.集合类. 要求:异常------掌握try-catch-finally的使用 IO流------掌握字 ...
- 安装.cer证书并将证书从.cer格式转化为.pem格式
## 安装.cer证书并将证书从.cer格式转化为.pem格式 ### 安装.cer证书到本地 打开*运行*窗口 输入MMC.exe, 单击*确定* 在打开的控制台1的窗口中. 选择*文件*, 选择* ...
- 一条SQL查询MYSQL最大内存用量
// max_mem_usage
- oracle 卸载和安装
第一步:在“服务”窗口中停止与oracle有关的所有服务 第二步:卸载Oracle软件 “所有程序——oracle 安装目录——oracle 安装产品——Universal Installer” 第三 ...
- js按钮浮动随手指方向移动而移动
window.document.getElementById("moveDIV").addEventListener("touchmove", function ...