es6中组件属性的形式

var info = {
    name : 'sisi',
    school : 'hust'
};
var MyInfo = React.createClass({
        
        render: function() {
          return <h1> {this.props.name} </h1>;
        }
      });
ReactDOM.render(
        <MyInfo  {...info} />,
        document.getElementById('example')
      );

以上代码的<MyInfo />组件中，有两个属性，name 和 school，我们一般见的都是

<MyInfo name='sisi' school='hust' />

或者

<MyInfo name=info.name school=info.school />

这两种形式，但是也可以采用es6中的扩展运算符...来表达，即

<MyInfo  {...info} />

的形式，表示info的所有可遍历属性都作为MyInfo组件的属性，这与

`<MyInfo name='sisi' school='hust' />`

是等价的。如果不需要将info对象的所有属性都作为MyInfo组件的属性，则尽量采用

`<MyInfo name='sisi' school='hust' />`

形式。

需要注意的是，如果组件表示成

<MyInfo {name : 'sisi' , school: 'hust' } />

则会报错，尽管我认为{...info}与{name : 'sisi' , school: 'hust' }等价的。所以这个地方我也有疑问，如果某位读者了解，可以留言评论指出。

文中 ...为扩展运算符，具体可以查看对象的扩展运算符
<MyInfo />为react组件，具体可参考阮一峰react入门教程