ECMA6 在反应路由器中传播参数

Question

我看到一个 reactjs 示例代码写成，

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

这是让我感到困惑的部分。

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

在此，RouteHandler 自定义元素使用 ...。带有 splat/rest 参数的 ECMA6 函数在其函数定义中使用三点。那么，为什么人们在应用程序端的函数调用（或）期间使用 ... 呢？

Answer 1

这不是 rest 运算符而是 spread operator，应用于 JSX 属性。参见 JSX Spread Attributes。

<RouteHandler {...this.state} /> 等价于 React.createElement(RouteHandler, Object.assign({}, this.state)).

请注意，对象传播和剩余运算符是 JSX 传播属性功能的灵感来源，它们不是 ES6 规范的一部分。有 a stage 1 proposal to include them in ES7. In the meantime, you can already use them by passing the --harmony option to the JSX compiler CLI, or the --stage 1 option to the babel CLI。

ECMA6 在反应路由器中传播参数

ECMA6 spread parameters in react-router

javascript

ecmascript-6

reactjs

react-router