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

Question

从react.js tutorial我们看到双花括号的用法：

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

然后在the second tutorial, "Thinking in react"：

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

然而，React JSX documentation没有描述或提及双花括号。这个语法是什么（双重卷曲）？是否有另一种方式在jsx中表达相同的东西或者这只是文档中的遗漏？

Answer 1

它只是一个在prop值中内联的对象字面值。它与

相同

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Answer 2

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

1. {..}的计算结果为JSX中的表达式。
2. {键：值}表示一个javascript对象。

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

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

如果您发现pic被花括号包围。这就是JSX嵌入变量的方式。 pic可以是任何Javascript表达式/变量/对象。 您还可以执行类似{2 + 3}的操作，它将计算为{5}

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

  

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

Answer 3

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

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

根据React official documentation，style属性接受 JavaScript对象而不是CSS字符串。

Answer 4

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

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

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

Answer 5

这意味着不必声明设置为预期样式属性的对象的样式变量，而可以仅在对象中设置样式属性...通常，当要添加的样式是但是对于需要更多样式的元素来说，声明样式变量更干净

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

<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>

Answer 6

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

style={jsObj}

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

所以您有：

style = { jsObj }

和

jsObj = {color:'#ffffff'}

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

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

Answer 7

我试着用简单的语言说出来让每个人都能理解。以下代码：

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

等于

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

因此，如果我们要将文字对象分配给属性，我们应该使用React表达式。

对于一些主要从AngularJs转移到ReactJs的人来说，它可能是与AngularJs的表达式绑定运算符 {{}} 混淆的一部分。所以，试着在ReactJs中以不同的方式看待它。