Javascript es6 spread操作符如何处理对象到支柱的转换？

我知道，为了使

{…todo}

在todo组件中工作，必须将其转换为类似以下内容的道具：

completed=false text=“clean room”

，但spread操作符是如何做到这一点的？当前的

{…todo}

是否会转换为

{completed:false}，{text:“clean room”}

consttodolist=（{todos，onTodoClick}）=>(

{todo.map（todo=>
onTodoClick（todo.id）}
/>
)}

)

es6 spread操作符确实通过将

{…todo}转换为{completed:false}

，

{text:“clean room”}

来工作

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

从

扩展语法允许在以下位置扩展表达式： 多个参数（用于函数调用）或多个元素（用于 数组文字）或多个变量（用于解构赋值） 这是意料之中的事

按照这个想法，创建了

JSX扩展操作符
。据报道,

这个。。。阵列已支持运算符（或扩展运算符）
在ES6中。还有一个针对对象Rest和Rest的ECMAScript建议
传播属性。我们正在利用这些受支持和
开发标准，以便在JSX中提供更清晰的语法

由于这已经遵循了spread运算符的思想，因此这两个运算符的统一确实是社区欢迎的想法
正如已经确立的那样，这里使用spread语法与ES6无关，ES6是一个JSX构造

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

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

//In
//出去
React.createElement(
组成部分，
{foo:“bar”，baz:“42”}
);

使用扩展道具：

// 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" })
);

//In
//出去
React.createElement(
组成部分，
赋值（{foo:bar}，xyz，{baz:42}）
);

因此，您可以看到，如果道具包含一个扩展道具，它们将被分离为多个对象并简单地合并。
这不是ES操作符，而是JSX操作符。