浅谈React的JSX语法（二）

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} />