1、JSX的新语法——展开属性
如果事先知道组件需要的全部props(属性),可以列出;但如果事先不知道要设置哪些 props,最好不要设置它,原因有两个:
① React不能检查属性类型,即使属性类型有错误也不能得到清晰的错误提示。
② props应该不可变的,修改props可能会导致预料之外的结果。
可以使用 JSX 的新特性——展开属性:
...操作符是增强的操作符,已经被 ES6 数组 支持。
var TimeBox = React.createClass({
render:function(){
return (
<p>{this.props.hour}:{this.props.minute}</p>
);
}
});
var props = {};
var date = new Date();
props.hour = date.getHours();
props.minute = date.getMinutes();
props.city = "Tokyo";
ReactDOM.render(
<TimeBox {...props}/>,
document.getElementById('timeBox')
);
展开属性能被多次使用,也可以和其它属性一起用,但要注意顺序很重要,后面的会覆盖掉前面的。
var TimeBox = React.createClass({
render:function(){
return (
<p>{this.props.city}——{this.props.hour}:{this.props.minute}</p>
);
}
});
var props = {};
var date = new Date();
props.hour = date.getHours();
props.minute = date.getMinutes();
props.city = "Tokyo";
ReactDOM.render(
<TimeBox {...props} minute={59} city={"Beijing"}/>,
document.getElementById('timeBox')
);
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:
<input regRex="/^\w{6,20}$/" />
解决:使用加 data- 前缀的自定义属性
<input data-regRex="/^\w{6,20}$/" />
有一个例外是:以 aria- 开头的网络无障碍属性在原生HTML元素里可以正常使用:
<div aria-hidden={true} />