es6传播算子如何在对象上进行道具变换？

Question

我知道为了使{...todo}在Todo组件中工作，必须将其转换为props，例如： 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>
)

Answer 1

es6 spread运算符确实可以通过将{...todo} to {completed:false}转换{...todo} to {completed:false} ， {text:"clean room"} 。

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

从msdn docs ，

扩展语法允许在需要多个参数（用于函数调用）或多个元素（用于数组文字）或多个变量（用于解构赋值）的地方扩展表达式。

按照这个想法，创建了JSX spread operator 。 根据React文档 ，

ES6中的数组已经支持...运算符（或散布运算符）。 还有一个ECMAScript建议书，涉及对象剩余和传播属性。 我们利用这些受支持和正在开发的标准，以便在JSX中提供更简洁的语法。

因为这已经遵循了传播运营商的想法，所以两者的统一确实是社区欢迎的想法。

Answer 2

正如已经确定的，此处使用传播语法与ES6（它是一个JSX构造）无关。

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

您可以使用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" })
);

因此，您可以看到，如果这些道具包含一个展开的道具，它们将被分成多个对象并被简单地合并。