React中文教程翻译文档 - JSX Syntax（语法）

最新推荐文章于 2024-08-20 13:19:56 发布

rsspub

最新推荐文章于 2024-08-20 13:19:56 发布

阅读量4.3k

点赞数

分类专栏： React 文章标签： JavaScript DOM JSX React Facebook

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JSX：使用XML语法编写JAVASCRIPT

React强烈推荐使用JSX，JSX一套使用XML语法编写JAVASCRIPT的脚本解析工具。

1. 为什么选用JSX

JSX并非唯一的选择，如果不习惯JSX的语法您也可以使用常规JS来编写；但请您了解完JSX的语法后再做决定，我们推荐您使用JSX

下面是使用常规JS使用React的代码：

var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');

我们推荐使用JSX有下述的几个理由：

非常方便就可以创建一个DOM节点；
跟创建DOM节点一样，开发人员想修改也是很简单的；
对有MXML和XAML使用经历的开发人员很友好，因为它们很相似；

1.1 JSX与JS语法对比

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = Nav({color:'blue'});

注意：为了使用 <Nav />必须先定义Nav

1.2 JSX也允许嵌套使用

var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;  // Profile是Nav的一个子节点
// Output (JS):
var app = Nav({color:'blue'}, Profile({}, 'click'));

使用 JSX Compiler可以看到JSX是如何被转换成浏览器能识别的JAVASCRIPT；

如果您想使用JSX做为编码工具，请查看Getting Starter中的指引。

2. React和JSX

React和JSX是两个完全不相关的技术，但JSX是React的一个很重要的思想；

2.1 DOM组件

var div = React.DOM.div;
var app = <div className="appClass">Hello, React!</div>;

2.2 复合组件

var MyComponent = React.createClass({/*...*/});
var app = <MyComponent someProperty={true} />;

下篇文章将介绍自定义组件基础 Component Basics

3. JSX让代码更简洁

我们知道使用Javascript定义DOM是件很麻烦的事情，比如创建一个DIV、span、h1、h2等；JSX提供一种简洁的方式让这些变得容易，只需使用@jsx的文档块标记即可。

// 有了上一行的@jsx React.DOM文档块标记就可以使用常规的DOM组件（div、span、h1、ul、li、table等）
// 如果想用其它非HTML常见标签才需要定义，如下面的Nav
var Nav;
// Input (JSX):
var tree = <Nav><span /></Nav>;
// Output (JS):
var tree = Nav({}, React.DOM.span({}));

4. 使用JavaScript表达式

4.1 属性

使用JavaScript表达式作为属性值，JSX用花括号（{}）代替引号（""）；

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = Person({name: window.isLoggedIn ? window.name : ''});

4.2 子节点

跟属性一样，JSX的子节点也可以使用JavaScript表示式；

// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = Container({}, window.isLoggedIn ? <Nav /> : <Login />);