Update translation for jsx-in-depth-zh-CN
iamchenxin committed
Sep 12, 2015 at 18:09 UTC
d92f4782ac0f8566ec9afe54fecc1522a447b864
1 file changed
+89
-4
docs/docs/02.1-jsx-in-depth.zh-CN.md
+89
-4
@@ -24,7 +24,7 @@ XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于
24
25
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
26
27
-要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
27
+要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
28
29
```javascript
30
var myDivElement = <div className="foo" />;
@@ -39,7 +39,7 @@ var myElement = <MyComponent someProperty={true} />;
39
React.render(myElement, document.getElementById('example'));
40
```
41
42
-React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
42
+React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
43
44
> 注意:
45
>
@@ -75,6 +75,15 @@ var app = React.createElement(
75
);
76
```
77
78
+当显示名称没有定义时，JSX 会根据变量赋值来推断类的 [显示名称](/react/docs/component-specs.html#displayname) :
79
+
80
+```javascript
81
+// 输入 (JSX):
82
+var Nav = React.createClass({ });
83
+// 输出 (JS):
84
+var Nav = React.createClass({displayName: "Nav", });
85
+```
86
+
87
使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。
88
89
如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。
@@ -85,6 +94,68 @@ var app = React.createElement(
94
> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
95
> `React.createElement` 里的校验代码。
96
97
+## 命名组件（Namespaced Components）
98
+
99
+如果你正在构建一个有很多子组件的组件，比如表单，你也许会最终得到许多的变量声明。
100
+
101
+```javascript
102
+// 尴尬的变量声明块
103
+var Form = MyFormComponent;
104
+var FormRow = Form.Row;
105
+var FormLabel = Form.Label;
106
+var FormInput = Form.Input;
107
+
108
+var App = (
109
+ <Form>
110
+ <FormRow>
111
+ <FormLabel />
112
+ <FormInput />
113
+ </FormRow>
114
+ </Form>
115
+);
116
+```
117
+
118
+为了使其更简单和容易，*命名组件*令你使用包含其他组件作为属性的单一的组件。
119
+
120
+```javascript
121
+var Form = MyFormComponent;
122
+
123
+var App = (
124
+ <Form>
125
+ <Form.Row>
126
+ <Form.Label />
127
+ <Form.Input />
128
+ </Form.Row>
129
+ </Form>
130
+);
131
+```
132
+
133
+要做到这一点，你只需要把你的*"子组件"*创建为主组件的属性。
134
+
135
+```javascript
136
+var MyFormComponent = React.createClass({ ... });
137
+
138
+MyFormComponent.Row = React.createClass({ ... });
139
+MyFormComponent.Label = React.createClass({ ... });
140
+MyFormComponent.Input = React.createClass({ ... });
141
+```
142
+
143
+当编译你的代码时，JSX会恰当的进行处理。
144
+
145
+```javascript
146
+var App = (
147
+ React.createElement(Form, null,
148
+ React.createElement(Form.Row, null,
149
+ React.createElement(Form.Label, null),
150
+ React.createElement(Form.Input, null)
151
+ )
152
+ )
153
+);
154
+```
155
+
156
+> 注意:
157
+>
158
+> 此特性在 [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) 及以上可用.
159
160
## JavaScript 表达式
161
@@ -102,6 +173,20 @@ var person = React.createElement(
173
);
174
```
175
176
+### Boolean 属性
177
+
178
+省略一个属性的值会导致JSX把它当做 `true`。要传值 `false`必须使用属性表达式。这常出现于使用HTML表单元素，含有属性如`disabled`, `required`, `checked` 和 `readOnly`。
179
+
180
+```javascript
181
+// 在JSX中，对于禁用按钮这二者是相同的。
182
+<input type="button" disabled />;
183
+<input type="button" disabled={true} />;
184
+
185
+// 在JSX中，对于不禁用按钮这二者是相同的。
186
+<input type="button" />;
187
+<input type="button" disabled={false} />;
188
+```
189
+
190
### 子节点表达式
191
192
同样地，JavaScript 表达式可用于描述子结点：
@@ -119,12 +204,12 @@ var content = React.createElement(
204
205
### 注释
206
122
-JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。
207
+JSX 里添加注释很容易；它们只是 JS 表达式而已。你仅仅需要小心的是当你在一个标签的子节点块(props.children)时，要用 `{}` 包围要注释的部分。
208
209
```javascript
210
var content = (
211
<Nav>
127
- {/* 一般注释, 用 {} 包围 */}
212
+ {/* child comment, 用 {} 包围 */}
213
<Person
214
/* 多
215
行