所以我创建了小提琴:https://jsfiddle.net/4ex7uh8g/
问题是我不明白那个小提琴的特定代码行的语法差异。看一下JavaScript选项卡中的24行代码。在这里，它使用这样的语法:<div style={{...spanStyle}}>也我尝试使用这样的语法:<div style={spanStyle}>，它也工作得很好，当我检查风格属性注入相同，所以对我来说，它看起来一切都是一样的，只是语法的差异，但我不太确定，我可以错过一些东西或误解时选择一个超过另一个?
我也读过这个帖子:这三个点在React中做什么?
它解释了一些关于三点运算符的事情，我很熟悉这个扩展运算符，但仍然在我提供的例子中，我看不出扩展运算符有什么区别，它不分离属性和值，它的工作原理与{spanStyle}相同，所以对我来说{{…spanStyle}}和{spanStyle}行为相同吗?
如果您能指出差异，以及何时以及为什么我应该使用一种语法而不是另一种语法，我将不胜感激。
当使用一对大括号时，你基本上告诉JSX你要嵌入一个JS表达式。当你在第一对中有第二对时，你正在创建一个内联对象字面量(因为你已经在JS上下文中了)。当你在JSX中通过style属性指定样式时，你必须提供一个对象，因此使用双括号。
使用:
{{...spanStyle}}
只是创建一个新的对象字面量，并使用扩展操作符(...)从spanStyle获取所有属性，因此，正如您已经注意到的，您将获得与简单执行{spanstyle}完全相同的结果，但要增加创建对象克隆的开销。
第一个括号是用于javascript求值部分的JSX规范:
<div style={ Javascripty stuff in here }
第一个括号启动javascript模式。下一组括号在javascript中，在javascript中{}表示new empty Object
最后一块拼图是展开运算符...。
当您在另一个对象的声明中对一个对象使用扩展操作符时，它会从该对象中吸取所有属性并将其应用于您正在调用的新对象:
<div style={{...anotherObject}} />
所以，如果你记得第一个括号激活javascript的东西，这一切都开始变得更有意义。
您要查找的是展开运算符:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
使用这个语法你可以创建一个新对象，并添加一些覆盖任何原始对象的prop。
的例子:
const spanStyle = {width: '100%', height: '400px'};
<div style={{...spanStyle, height: 'auto'}}>
如果您不需要覆盖任何内容，只需跳过spread!