React - 双大括号与一个大括号枚举属性之间的区别

Question

所以我创建了小提琴： https: //jsfiddle.net/4ex7uh8g/

问题是我不理解该小提琴特定代码行的语法差异。查看 JavaScript 选项卡中的第 24 行。在这里它使用这样的语法：<div style={{...spanStyle}}>我也尝试使用这样的语法：<div style={spanStyle}>并且它也工作得很好，当我检查样式属性被注入相同时，所以对我来说，看起来一切都是一样的，只是语法上的差异，但我我不太确定，在选择其中之一时我是否会遗漏某些内容或产生误解？

我也读过这个帖子：React 中的这三个点有什么作用？

它解释了有关三点运算符的一些事情，我对这个扩展运算符非常熟悉，但在我提供的示例中，我仍然看不到扩展运算符有什么区别，它没有分离属性和值，它的工作原理与{spanStyle}，那么对我来说 {{...spanStyle}} 和 {spanStyle} 的行为相同吗？

如果您能指出差异（如果有）以及何时以及为什么我应该使用一种语法而不是另一种语法，我将非常感激。

Answer 1

当使用一对大括号时，您基本上告诉 JSX 您将嵌入一个 JS 表达式。当第一对中有第二对时，您正在创建一个内联对象文字（因为您已经在 J​​S 上下文中）。当您通过指定样式时style，您必须提供一个对象，因此需要双括号。

使用：

{{...spanStyle}}

spanStyle只需创建一个新的对象文字并使用扩展运算符 ( )获取所有属性...，因此，正如您已经注意到的，您将获得与简单执行完全相同的结果{spanstyle}，但需要创建对象克隆的开销。