React的JSX语法中的双花括号的目的是什么？

从react.js教程中，我们可以看到双花括号的用法：

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

然后在第二个教程“ Thinking in react”中：

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

但是，React JSX文档没有描述或提及双花括号。此语法（双curies）的作用是什么？还有另一种方法可以在jsx中表达相同的东西，或者这仅仅是文档中的遗漏？

它只是内在prop值中的对象文字。和...一样

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

花括号在这里有2种用法：-

1. {..}的结果为JSX中的表达式。
2. {key：value}表示一个javascript对象。

让我们看一个简单的例子。

<Image source={pic} style={{width: 193}}/>

如果观察到pic被大括号包围。这就是JSX嵌入变量的方式。pic可以是任何Javascript表达式/变量/对象。您还可以执行类似{2 + 3}的操作，它将得出{5}

让我们在这里剖析样式。 {width: 193}是一个Javascript对象。要将这个对象嵌入JSX，您需要大括号，因此，{ {width: 193} }

注意：要在JSX中嵌入任何类型的Javascript表达式/变量/对象，都需要花括号。

如果您不知道，为什么{{color: 'red'}}在style标记中使用

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

根据React的官方文档，style属性接受JavaScript对象而不是CSS字符串。

React使用JSX，在JSX中，任何变量，状态对象，表达式等都必须包含在{}中。

在JSX中提供内联样式时，必须将其指定为对象，因此必须再次在花括号内。{}。

这就是为什么有两对花括号的原因

这意味着您无需声明设置为预期样式属性的对象的样式变量，而只需在对象中设置样式属性即可。当您要添加的样式很少时，这通常是最佳做法需要更多样式的元素更容易声明样式变量

例如，对于具有较少样式属性的元素，执行此操作

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

对于具有更多样式属性的HTML元素，请执行此操作

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

然后用jsx语法调用它

<span style={spanStyle}>
  {this.props.product.name}
</span>

我尝试用简单的语言告诉大家，让所有人都能理解。下面的代码：

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

等于

<span 
     dangerouslySetInnerHTML={ {__html: rawMarkup} } 
/>

因此，如果要为属性分配文字对象，则只需使用React表达式。

对于一些主要从AngularJs迁移到ReactJs的人来说，这可能与AngularJs的表达式绑定运算符{{}}混淆了。因此，尝试在ReactJs中以不同的方式看待它。

我对双花括号的解释是，样式对象仅接受JavaScript对象，因此该对象必须位于单花括号内。

style={jsObj}

样式工件的对象具有key：value对（字典对数组），并且该对象表示为，例如{color:'#ffffff'}。

所以你有：

style = { jsObj }

和

jsObj = {color:'#ffffff'}

就像在代数中一样，当您替换时，它表示：

style = { {color:'#ffffff'} }