JSX 与 HTML 非常相似，但是有些关键区别要注意。

注意:

关于 DOM 的区别，如行内样式属性 style，参考 DOM 区别

HTML 实体

HTML 实体可以插入到 JSX 的文本中。

<div>First &middot; Second</div>

如果想在 JSX 表达式中显示 HTML 实体，可以会遇到二次转义的问题，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。

// 错误: 会显示 “First · Second”
<div>{"First &middot; Second"}</div>

有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。

<div>{"First · Second"}</div>

安全的做法是先找到 实体的 Unicode 编号 ，然后在 JavaScript 字符串里使用。

<div>{"First u00b7 Second"}</div>
<div>{"First " + String.fromCharCode(183) + " Second"}</div>

可以在数组里混合使用字符串和 JSX 元素。

<div>{["First ", <span>&middot;</span>, " Second"]}</div>

万不得已，可以直接使用原始 HTML。

<div dangerouslySetInnerHTML={{__html: "First &middot; Second"}} />

自定义 HTML 属性

如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。

<div data-custom-attribute="foo" />

以 aria- 开头的 [网络无障碍] 属性可以正常使用。

<div aria-hidden={true} />