te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>reactjs - What is the meaning of the three points Operator in Javascript - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - What is the meaning of the three points Operator in Javascript - Stack Overflow

programmeradmin3浏览0评论

i see rubix code

(site right up demo click)

it is code in react ponent

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 next line code

...this.props

and

return next line code

a {...props}

what is this "..." ?

i see rubix code

http://wrapbootstrap./preview/WB09498FH (site right up demo click)

it is code in react ponent

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 next line code

...this.props

and

return next line code

a {...props}

what is this "..." ?

Share Improve this question edited Feb 14, 2019 at 19:31 Strider 3,7495 gold badges37 silver badges67 bronze badges asked Oct 13, 2015 at 1:19 kyunghwanjungkyunghwanjung 5107 silver badges19 bronze badges 3
  • 2 It's a non-standardized yet ES2016 object spread operator. github./sebmarkbage/ecmascript-rest-spread – zerkms Commented Oct 13, 2015 at 1:22
  • @zerkms think you sir i find site developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – kyunghwanjung Commented Oct 13, 2015 at 1:28
  • 1 that article looks similar, but not relevant – zerkms Commented Oct 13, 2015 at 1:32
Add a ment  | 

1 Answer 1

Reset to default 14

As @zerkms mentioned in the ments; it is the Object Rest/Spread Properties syntax in the ECMAScript 2016 (ES7) Proposal, also mentioned in the React docs.

The code you see

var props = {
  href: '/app/mailbox/mail',
  onClick: this.handleClick,

  ...this.props,

  className: classes
};

gets evaluated to the following, where the props object properties get extended onto the new props object:

var props = {
  href: '/app/mailbox/mail',
  onClick: this.handleClick,

  src: 'https://example.',
  name: 'myName',
  labelClass: 'myLabelClass',
  labelValue: 'mylabelValue',

  className: classes
};
发布评论

评论列表(0)

  1. 暂无评论