我看到了rubix代码
http://wrapbootstrap.com/preview/WB09498FH(该网站位于演示点击的右侧)
它是React组件中的代码
javascript
//react ES6
var InboxItem = React.createClass({
mixins: [State, Navigation],
statics: {
ID: 0,
resetID: function() {
InboxItem.ID = 0;
},
getID: function() {
return ++InboxItem.ID;
}
},
handleClick: function(e) {
e.preventDefault();
e.stopPropagation();
this.transitionTo('/app/mailbox/mail');
},
render: function() {
var classes = classNames({
'inbox-item': true,
'unread': this.props.unread
});
var props = {
href: '/app/mailbox/mail',
onClick: this.handleClick,
...this.props,
className: classes
};
return (
<a {...props}>
<div className='inbox-avatar'>
<img src={this.props.src} width='40' height='40' className={this.props.imgClass + ' hidden-xs'} />
<div className='inbox-avatar-name'>
<div className='fg-darkgrayishblue75'>{this.props.name}</div>
<div><small><Badge className={this.props.labelClass} style={{marginRight: 5, display: this.props.labelValue ? 'inline':'none'}}>{this.props.labelValue}</Badge><span>{this.props.description}</span></small></div>
</div>
<div className='inbox-date hidden-sm hidden-xs fg-darkgray40 text-right'>
<div style={{position: 'relative', top: 5}}>{this.props.date}</div>
<div style={{position: 'relative', top: -5}}><small>#{InboxItem.getID()}</small></div>
</div>
</div>
</a>
);
}
});
onClick下一行代码
...这个道具
和
返回下一行代码
{... props}
这是什么 ”...” ?
正如@zerkms在评论中提到的; 它是ECMAScript 2016(ES7)提案中的对象剩余/扩展属性运算符,在React docs中也提到过。
您看到的代码
var props = {
href: '/app/mailbox/mail',
onClick: this.handleClick,
...this.props,
className: classes
};
被评估为以下内容,其中props
对象属性扩展到新的props对象上:
var props = {
href: '/app/mailbox/mail',
onClick: this.handleClick,
src: 'https://example.com',
name: 'myName',
labelClass: 'myLabelClass',
labelValue: 'mylabelValue',
className: classes
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句