Add Chinese translation of jsx-gotchas
Cam Song committed
Dec 14, 2014 at 04:28 UTC
f84ede6d34b5d7840f96c0e80293320e2088d6c4
1 file changed
+67
docs/docs/02.3-jsx-gotchas.zh-CN.md
new
+67
@@ -0,0 +1,67 @@
1
+---
2
+id: jsx-gotchas-zh-CN
3
+title: JSX 陷阱
4
+permalink: jsx-gotchas-zh-CN.html
5
+prev: jsx-spread-zh-CN.html
6
+next: interactivity-and-dynamic-uis-zh-CN.html
7
+---
8
+
9
+JSX 与 HTML 非常相似，但是有些关键区别要注意。
10
+
11
+> 提示:
12
+>
13
+> 关于 DOM 的区别，如行内样式属性 `style`，参考 [DOM 区别](/react/docs/dom-differences.html)
14
+
15
+## HTML 实体
16
+
17
+HTML 实体可以插入到 JSX 的文本中。
18
+
19
+```javascript
20
+<div>First · Second</div>
21
+```
22
+
23
+如果想在 JSX 表达式中显示 HTML 实体，可以会遇到二次转义的问题，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。
24
+
25
+```javascript
26
+// 错误: 会显示 “First · Second”
27
+<div>{'First · Second'}</div>
28
+```
29
+
30
+有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。
31
+
32
+```javascript
33
+<div>{'First · Second'}</div>
34
+```
35
+
36
+安全的做法是先找到 [实体的 Unicode 编号](http://www.fileformat.info/info/unicode/char/b7/index.htm) ，然后在 JavaScript 字符串里使用。
37
+
38
+```javascript
39
+<div>{'First \u00b7 Second'}</div>
40
+<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
41
+```
42
+
43
+可以在数组里混合使用字符串和 JSX 元素。
44
+
45
+```javascript
46
+<div>{['First ', <span>·</span>, ' Second']}</div>
47
+```
48
+
49
+万不得已，可以直接使用原始 HTML。
50
+
51
+```javascript
52
+<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
53
+```
54
+
55
+## 自定义 HTML 属性
56
+
57
+如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 `data-` 前缀。
58
+
59
+```javascript
60
+<div data-custom-attribute="foo" />
61
+```
62
+
63
+以 `aria-` 开头的 [网络无障碍] 属性可以正常使用。
64
+
65
+```javascript
66
+<div aria-hidden={true} />
67
+```