diff --git a/docs/02.3-jsx-gotchas.zh-CN.md b/docs/02.3-jsx-gotchas.zh-CN.md new file mode 100644 index 000000000..ad68fd369 --- /dev/null +++ b/docs/02.3-jsx-gotchas.zh-CN.md @@ -0,0 +1,67 @@ +--- +id: jsx-gotchas-zh-CN +title: JSX 陷阱 +permalink: jsx-gotchas-zh-CN.html +prev: jsx-spread-zh-CN.html +next: interactivity-and-dynamic-uis-zh-CN.html +--- + +JSX 与 HTML 非常相似,但是有些关键区别要注意。 + +> 提示: +> +> 关于 DOM 的区别,如行内样式属性 `style`,参考 [DOM 区别](/react/docs/dom-differences.html) + +## HTML 实体 + +HTML 实体可以插入到 JSX 的文本中。 + +```javascript +
First · Second
+``` + +如果想在 JSX 表达式中显示 HTML 实体,可以会遇到二次转义的问题,因为 React 默认会转义所有字符串,为了防止各种 XSS 攻击。 + +```javascript +// 错误: 会显示 “First · Second” +
{'First · Second'}
+``` + +有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。 + +```javascript +
{'First · Second'}
+``` + +安全的做法是先找到 [实体的 Unicode 编号](http://www.fileformat.info/info/unicode/char/b7/index.htm) ,然后在 JavaScript 字符串里使用。 + +```javascript +
{'First \u00b7 Second'}
+
{'First ' + String.fromCharCode(183) + ' Second'}
+``` + +可以在数组里混合使用字符串和 JSX 元素。 + +```javascript +
{['First ', ·, ' Second']}
+``` + +万不得已,可以直接使用原始 HTML。 + +```javascript +
+``` + +## 自定义 HTML 属性 + +如果往原生 HTML 元素里传入 HTML 规范里不存在的属性,React 不会显示它们。如果需要使用自定义属性,要加 `data-` 前缀。 + +```javascript +
+``` + +以 `aria-` 开头的 [网络无障碍] 属性可以正常使用。 + +```javascript +
+```