所以我创造了小提琴：https://jsfiddle.net/4ex7uh8g/
问题是我不明白这把小提琴的特定代码行的语法差异。看看JavaScript标签中的24行。这里它使用了这样的语法：<div style={{...spanStyle}}>我也尝试使用这样的语法：<div style={spanStyle}>，它也能正常工作，当我检查时，样式属性被完全相同地注入，所以对我来说，一切看起来都是一样的，只是语法不同，但我真的不确定，在选择一个属性时，我是否遗漏了什么或误解了什么？
我也读过这个帖子：What do these three dots in React do?
它解释了一些关于三点运算符的内容，我非常熟悉这个扩散运算符，但在我提供的示例中，我仍然看不出扩散运算符有什么区别，它没有分隔属性和值，它的工作原理与{spanStyle}相同，所以对我来说，{{... spanStyle}}和{spanStyle}的作用相同？
如果你能指出其中的区别，我会非常感激，如果有，什么时候，为什么我应该使用一种语法而不是另一种语法。
3条答案
按热度按时间gywdnpxw1#
当使用一对大括号时，你基本上告诉JSX你要嵌入一个JS表达式。当你在第一对中有第二对时，你创建了一个内联的对象常量（就像你已经在JS上下文中一样）。当你通过JSX中的
style属性指定样式时，你必须提供一个对象，因此需要双大括号。使用：
只是创建了一个新的对象常量，并使用spread操作符（
...）从spanStyle中获取所有属性，因此，正如您已经注意到的，您将获得与简单执行{spanstyle}完全相同的结果，但需要创建一个对象克隆。vuktfyat2#
第一个括起来的括号用于javascript评估部分的JSX规范：
所以，第一组括号基本上启动了javascript模式，下一组括号位于javascript区域，在javascript中表示
{}最后一块拼图是spread运算符
...。当你在另一个对象的声明中对一个对象使用spread操作符时，它会从那个对象中吸取所有的属性，并将其应用到你正在调用的新对象中：
所以，如果你记得第一个括号激活了javascript的东西，这一切开始变得更有意义。
9o685dep3#
您要查找的是排列运算符：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
使用此语法，可以创建新对象，并添加一些属性以覆盖任何原始对象属性。
示例：
如果你不需要覆盖任何东西，只是跳过传播!