JSX 陷阱
优质
小牛编辑
114浏览
2023-12-01
JSX 与 HTML 非常相似,但是有些关键区别要注意。
注意:
关于 DOM 的区别,如行内样式属性
style
,参考 DOM 区别
HTML 实体
HTML 实体可以插入到 JSX 的文本中。
<div>First · Second</div>
如果想在 JSX 表达式中显示 HTML 实体,可以会遇到二次转义的问题,因为 React 默认会转义所有字符串,为了防止各种 XSS 攻击。
// 错误: 会显示 “First · Second”
<div>{'First · 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>·</span>, ' Second']}</div>
万不得已,可以直接使用原始 HTML。
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
自定义 HTML 属性
如果往原生 HTML 元素里传入 HTML 规范里不存在的属性,React 不会显示它们。如果需要使用自定义属性,要加 data-
前缀。
<div data-custom-attribute="foo" />
以 aria-
开头的 [网络无障碍] 属性可以正常使用。
<div aria-hidden={true} />