浅谈React的JSX语法（二）

- 日理万妓 2022-06-17 12:52 253阅读 0赞

1、JSX的新语法——展开属性

如果事先知道组件需要的全部props（属性），可以列出；但如果事先不知道要设置哪些 props，最好不要设置它，原因有两个：

①　React不能检查属性类型，即使属性类型有错误也不能得到清晰的错误提示。

②　props应该不可变的，修改props可能会导致预料之外的结果。

可以使用 JSX 的新特性——展开属性：

...操作符是增强的操作符，已经被 ES6 数组 支持。

展开属性能被多次使用，也可以和其它属性一起用，但要注意顺序很重要，后面的会覆盖掉前面的。

2、JSX的陷阱

1) HTML实体：

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

<div>First Second</div>  /* First Second */

问题：

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

<div>{'First Second'}</div> /* First Second */

解决方法：

①　最简单的方法：直接用Unicode字符，但要确保文件是UTF-8 编码且网页也指定为UTF-8编码

<div>{'First Second'}</div> /* First Second */

②　安全的方法：先找到实体的Unicode 编号，然后在 JSX 表达式里使用。

<div>{'First\u0020Second'}</div>
    <div>{'First' + String.fromCharCode(32) + 'Second'}</div>

2) 自定义HTML属性：

在自定义的React组件中使用任意的属性都是被支持的，但如果往原生HTML元素里传入HTML规范里不存在的属性，React不会显示，会出现Warning：

解决：使用加 data- 前缀的自定义属性

有一个例外是：以 aria- 开头的网络无障碍属性在原生HTML元素里可以正常使用：

还没有评论，来说两句吧...