原文: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);

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

还有一点是,在创建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中,可以使用...运算符,表示将一个对象的键值对与ReactElementprops属性合并,这个...运算符的实现类似于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语法说明的更多相关文章

  1. 2. React JSX语法及特点介绍

    什么是JSX         JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...

  2. React(JSX语法)-----JSX基本语法

    JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...

  3. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  4. React(JSX语法)----动态UI

    1.React honws how to bubble and capture events according to the spec,and events passed to your event ...

  5. React(JSX语法)----JSX拼写

    注意:For DOM differences,such as the inline style attribute,check here. // bad: it displays "FIrs ...

  6. 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 ...

  7. 22-React JSX语法

    React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...

  8. Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办

    2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...

  9. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

随机推荐

  1. 'Check Android SDK'has encountered a problem.An internal error during:"Check Android SDK".

    在android项目下的layout目录下创建一个xml文件finish之后,报此错误.虽然点ok之后,不影响使用. 解决方案: 1.把project菜单下的build automatically前面 ...

  2. 每天学习一点点--word-break和word-wrap用法和区别

    有时候一个又臭又长的单词出现在一个并不宽到足以容纳这个单词时会出现内容溢出容器这种情况: <!DOCTYPE html> <html lang="en"> ...

  3. Yii框架(Yii Framework)部署

    一.下载Yii 在部署yii框架之前首先要搭建好php环境,这里就不说搭建环境的问题了(这里已经部署好wampserver了),环境搭建好后,到yii官方网站下载yii framework:http: ...

  4. C/C++代码覆盖率生成

    初始状态下只有一个源代码文件 nosoul@linux:testCov> ls test.c nosoul@linux:testCov> 第一步:编译.链接.执行可执行文件 gcc -o ...

  5. 理解MySQL——索引与优化

    转自:理解MySQL——索引与优化 写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存 ...

  6. C++学习笔记29:运行期型式信息2

    static_cast 静态转型的用途 与dynamic_cast不同,static_cast不仅可以用于指针和引用,还可以用于其他型式 一般用于非类型式的普通数据对象转型 静态转型的问题 不进行运行 ...

  7. php判断json对象是否存在的方法

    在实际测试中php读取json数组时 使用简单的 if 或者 array_key_exists 去判断对象是否存在是会报错的,以下是google搜寻的正确判断方法 实际上出现报错只是我对php还不是很 ...

  8. cs231n笔记:线性分类器

    cs231n线性分类器学习笔记,非完全翻译,根据自己的学习情况总结出的内容: 线性分类 本节介绍线性分类器,该方法可以自然延伸到神经网络和卷积神经网络中,这类方法主要有两部分组成,一个是评分函数(sc ...

  9. 优先队列 :Priority Queue

    PriorityQueue是从JDK1.5开始提供的新的数据结构接口,它是一种基于优先级堆的极大优先级队列.优先级队列是不同于先进先出队列的另一种队列. 每次从队列中取出的是具有最高优先权的元素.如果 ...

  10. python3 filter用法(举例求0~n之间的素数)

    在用python3求0~n之间的素数时,关于filter用法的有点模糊,于是上网查了一下filter用法. 求0~n之间素数的脚本prime.py: def f(x): plist = [0,0] + ...