我看到rubix代码
http://wrapbootstrap.com/preview/WB09498FH(网站点击演示点击)@H_403_3@
JavaScript的@H_403_3@
//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> ); } });
… this.props@H_403_3@
和@H_403_3@
一个{…道具}@H_403_3@
这是什么 ”…” ?@H_403_3@
@R_403_323@
正如@zerkms在
comments中提到的那样;它是
ECMAScript 2016 (ES7) Proposal中的对象静止/传播属性运算符,也在
React docs中提到过.
var props = { href: '/app/mailBox/mail',className: classes };
得到以下评估,其中props对象属性被扩展到新的props对象:@H_403_3@
var props = { href: '/app/mailBox/mail',src: 'https://example.com',name: 'myName',labelClass: 'myLabelClass',labelValue: 'mylabelValue',className: classes };