Add Chinese translation of jsx-in-depth
Cam Song committed
Dec 11, 2014 at 00:19 UTC
8621b4d338f72687b5ee66221a580f9473ccd5b6
1 file changed
+136
docs/docs/02.1-jsx-in-depth.zh-CN.md
new
+136
@@ -0,0 +1,136 @@
1
+---
2
+id: jsx-in-depth-zh-CN
3
+title: 深入 JSX
4
+permalink: jsx-in-depth-zh-CN.html
5
+prev: displaying-data-zh-CN.html
6
+next: jsx-spread-zh-CN.html
7
+---
8
+
9
+[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
10
+
11
+## 为什么要用 JSX？
12
+
13
+你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。
14
+
15
+它对于非专职开发者比如设计师也比较熟悉。
16
+
17
+XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。
18
+
19
+它没有修改 JavaScript 语义。
20
+
21
+## HTML 标签 对比 React 模块
22
+
23
+React 可以渲染 HTML 标签 (strings) 或 React 模块 (classes)。
24
+
25
+要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
26
+
27
+```javascript
28
+var myDivElement = <div className="foo" />;
29
+React.render(myDivElement, document.body);
30
+```
31
+
32
+要渲染 React 模块，只需创建一个大写字母开头的本地变量。
33
+
34
+```javascript
35
+var MyComponent = React.createClass({/*...*/});
36
+var myElement = <MyComponent someProperty={true} />;
37
+React.render(myElement, document.body);
38
+```
39
+
40
+React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
41
+
42
+> 提示:
43
+>
44
+> 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML
45
+> 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
46
+
47
+## 转换（Transform）
48
+
49
+JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 `React.createElement` 的参数。
50
+
51
+```javascript
52
+var Nav;
53
+// 输入 (JSX):
54
+var app = <Nav color="blue" />;
55
+// 输出 (JS):
56
+var app = React.createElement(Nav, {color:"blue"});
57
+```
58
+
59
+注意，要想使用 `<Nav />`，`Nav` 变量一定要在作用区间内。
60
+
61
+JSX 也支持使用 XML 语法定义子结点：
62
+
63
+```javascript
64
+var Nav, Profile;
65
+// 输入 (JSX):
66
+var app = <Nav color="blue"><Profile>click</Profile></Nav>;
67
+// 输出 (JS):
68
+var app = React.createElement(
69
+ Nav,
70
+ {color:"blue"},
71
+ React.createElement(Profile, null, "click")
72
+);
73
+```
74
+
75
+使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。
76
+
77
+如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。
78
+
79
+> 提示:
80
+>
81
+> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
82
+> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
83
+> `React.createElement` 里的校验代码。
84
+
85
+## JavaScript 表达式
86
+
87
+### 属性表达式
88
+
89
+要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 (`{}`) 包起来，不要用引号 (`""`)。
90
+
91
+```javascript
92
+// 输入 (JSX):
93
+var person = <Person name={window.isLoggedIn ? window.name : ''} />;
94
+// 输出 (JS):
95
+var person = React.createElement(
96
+ Person,
97
+ {name: window.isLoggedIn ? window.name : ''}
98
+);
99
+```
100
+
101
+### 子节点表达式
102
+
103
+同样地，JavaScript 表达式可用于描述子结点：
104
+
105
+```javascript
106
+// 输入 (JSX):
107
+var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
108
+// 输出 (JS):
109
+var content = React.createElement(
110
+ Container,
111
+ null,
112
+ window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
113
+);
114
+```
115
+
116
+### 注释
117
+
118
+JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。
119
+
120
+```javascript
121
+var content = (
122
+ <Nav>
123
+ {/* 一般注释, 用 {} 包围 */}
124
+ <Person
125
+ /* 多
126
+ 行
127
+ 注释 */
128
+ name={window.isLoggedIn ? window.name : ''} // 行尾注释
129
+ />
130
+ </Nav>
131
+);
132
+```
133
+
134
+> 提示:
135
+>
136
+> JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。
\ No newline at end of file