javascript - react 路由器中的ECMA6传播参数

我看到一个reactjs示例代码写为

var App = React.createClass({
render: function () {
    return (
      <div>
      <div className='content'>
            <RouteHandler {...this.state} />
      </div>
      </div>
      )
   }
})

这是令我困惑的部分。

        <RouteHandler {...this.state} />

在这种情况下，RouteHandler自定义元素使用...。具有splat / rest参数的ECMA6函数在其函数定义中使用三点。那么，为什么人们在应用程序端的函数调用(或)过程中使用...？

最佳答案

这不是rest运算符，而是应用于JSX属性的spread operator。
参见JSX Spread Attributes。
<RouteHandler {...this.state} />与React.createElement(RouteHandler, Object.assign({}, this.state))等效。

请注意，JSX扩展属性功能的对象扩展和剩余运算符不是ES6规范的一部分。有a stage 1 proposal可以将它们包括在ES7中。同时，您可以通过将--harmony选项传递给JSX编译器CLI，或将--stage 1选项传递给babel CLI来使用它们。