javascript - es6 传播运算符如何处理对象到 Prop 的转换？

Question

我知道为了让 {...todo} 在 Todo 组件中工作，它必须被转换成像这样的 Prop :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 无关，它是一种 JSX 结构。

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

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

没有传播 Prop :

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

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

使用 spread 属性:

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

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

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