Question

我看到一个反应的示例代码编写为，

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

这是令我困惑的部分。

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

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

Answer 1

这不是rest操作符，而是spread operator，适用于JSX属性。请参阅JSX Spread Attributes。

<RouteHandler {...this.state} />相当于React.createElement(RouteHandler, Object.assign({}, this.state))。

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

ECMA6在react-router中传播参数

1 个答案: