脚本宝典收集整理的这篇文章主要介绍了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，我们一般见的都是
@H_126_67@<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入门教程
以上是脚本宝典为你收集整理的es6中组件属性的形式全部内容，希望文章能够帮你解决es6中组件属性的形式所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。