es6 扩展运算符如何处理对象到道具的转换？答案

【问题标题】：How does es6 spread operator work on an object to props transformation?es6 扩展运算符如何处理对象到道具的转换？
【发布时间】：2016-08-19 04:05:28
【问题描述】：

我知道，为了让{...todo} 在 Todo 组件中工作，它必须转换为类似以下内容的道具：completed=false text="clean room"，但扩展运算符如何做到这一点？当前的{...todo}不会被转换成{completed:false}, {text:"clean room"}吗？

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

【问题讨论】：

不是 ES 操作符，是 JSX 操作符。 facebook.github.io/react/docs/jsx-spread.html

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

正如已经确定的，这里使用扩展语法与 ES6 无关，它是一个 JSX 构造。

JSX 只是 React.createElement 调用的语法糖。 props 实际上是作为对象传递给该函数的。

您可以使用Babel repl 看看 JSX 是如何转换的。

没有传播道具：

// In
<Component foo="bar" baz="42" />

// Out
React.createElement(
  Component,
  { foo: "bar", baz: "42" }
);

使用传播道具：

// In
<Component foo="bar" {...xyz} baz="42" />

// Out
React.createElement(
  Component,
  Object.assign({ foo: "bar" }, xyz, { baz: "42" })
);

所以你可以看到，如果 props 包含一个 spread prop，它们被分成多个对象并简单地合并。

【讨论】：

【解决方案2】：

es6 扩展运算符确实通过转换 {...todo} to {completed:false}、{text:"clean room"} 来工作。

然而，在 JSX 中使用了相同的运算符，但不一定相同。

来自msdn docs，

展开语法允许表达式在以下位置展开多个参数（用于函数调用）或多个元素（用于数组文字）或多个变量（用于解构赋值）预计。

遵循这个想法，创建了JSX spread operator。根据React docs，

数组已经支持 ... 运算符（或扩展运算符）在 ES6 中。还有一个针对 Object Rest 的 ECMAScript 提案和传播属性。我们正在利用这些支持和开发标准以便在 JSX 中提供更简洁的语法。

由于这已经沿用了传播算子的想法，所以两者的统一确实是社区欢迎的想法

【讨论】：