react-router中的ECMA6传播参数

Posted 2023-02-21

【中文标题】react-router中的ECMA6传播参数

【英文标题】：ECMA6 spread parameters in react-router

【发布时间】：2015-07-04 18:43:19

【问题描述】：

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

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

这是让我困惑的部分。

        <RouteHandler ...this.state />

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

【参考方案1】：

这不是 rest 运算符，而是 spread operator，应用于 JSX 属性。 见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 来使用它们。

【讨论】：

您应该澄清这不是普通的 ES6 扩展运算符，而是使其在对象上工作的 JSX 特性