React JSX语法

JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用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")
);
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)

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

使用jsx和不适用jsx的区别
// 使用JSX
React.render(
<div>
<div>
<div>content</div>
</div>
</div>,
document.getElementById('example')
); // 不使用JSX
React.render(
React.createElement('div', null,
React.createElement('div', null,
React.createElement('div', null, 'content')
)
),
document.getElementById('example')
);

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

注意:

由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。

JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成 React.createElement 的参数。

注意:

JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过 React.createElement 里的校验代码。

属性表达式

要使用 JavaScript表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (“”)。

// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ‘ ‘} />;
// 输出 (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
子节点表达式

同样地,JavaScript 表达式可用于描述子结点。

// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
注释

JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

/var content = (
<Nav>
{/* 一般注释, 用 {} 包围 */}
<Person
/* 多

注释 */
name={window.isLoggedIn ? window.name : ''} // 行尾注释
/>
</Nav>
);

22-React JSX语法的更多相关文章

  1. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

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

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

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

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

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

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

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

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

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

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

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

  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. php页面如何增加下载软件功能

    php <?php $array = parse_ini_file("sample.ini"); ?> <a id="btnDownloadFull&q ...

  2. AngularJS 2.0

    https://angular.io/docs/ts/latest/guide/learning-angular.html QuickStart: git clone https://github.c ...

  3. ora-02292

    select  table_name from all_constraints where constraint_name = '约束的名称'

  4. hduoj 1285 确定比赛名次

    http://acm.hdu.edu.cn/showproblem.php?pid=1285 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory ...

  5. meta

    <meta charset="UTF-8"> <meta name="viewport" content="width=device ...

  6. 使用Vue构建中(大)型应用

    init 首先要起一个项目,推荐用vue-cli安装 $ npm install -g vue-cli $ vue init webpack demo $ cd demo $ npm install ...

  7. 如何申请国际版Office365和Azure的试用账号

    关键字:国际版.Office365.Azure.试用账号.1美元.信用卡 待续

  8. WCF简单使用(分别部署在控制台和IIS上)

    WCF部署到控制台 1.下面通过一个简单的服务示例来认识WCF1.新建项目,名称IBLL,解决方案名称WcfDemo,模板选择类库2.修改Class1.cs文件名称为 IUserInfoService ...

  9. 【转】CentOS系统中常用查看日志命令

    来源:http://www.centoscn.com/CentOS/help/2014/0310/2540.html Linux IDE RedHat 防火墙活动 .cat tail -f 日 志 文 ...

  10. sqlserver数据库 Schema

    //读取数据库中所有的数据库 USE MASTER DECLARE @is_policy_automation_enabled bit SET @is_policy_automation_enable ...