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

【问题标题】：React - difference between double curly brackets vs one curly bracket to enumerate propertiesReact - 双花括号与一个大括号之间的区别枚举属性
【发布时间】：2021-01-22 20:02:35
【问题描述】：

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

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

我也读过这个帖子：What do these three dots in React do?

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

如果您能指出其中的区别以及何时以及为什么我应该使用一种语法而不是另一种语法，将不胜感激。

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

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

{{...spanStyle}}

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

【讨论】：

哦，这很有道理，谢谢！我认为这是一些特殊的 jsx 语法。

【解决方案2】：

第一个括号是用于 javascript 评估部分的 JSX 规范：

<div style={ Javascripty stuff in here }

所以，第一个括号基本上启动了 javascript 模式。下一组括号在javascript中，在javascript中{}表示new empty Object

最后一块拼图是展开运算符...。

当您在另一个对象的声明中对一个对象使用扩展运算符时，它会从该对象中吸取所有属性并将其应用于您正在调用的新对象：

<div style={{...anotherObject}} />

所以，如果您还记得第一个括号激活了 javascript 内容，那么这一切都开始变得更有意义了。

【讨论】：

【解决方案3】：

您正在寻找的是扩展运算符：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

使用这种语法，您可以创建一个新对象，并添加一些覆盖任何原始对象道具的道具。

例子：

const spanStyle = {width: '100%', height: '400px'};

<div style={{...spanStyle, height: 'auto'}}>

如果您不需要覆盖任何内容，请跳过传播！

【讨论】：