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

Tom小小蛋蛋2020-03-12

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

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

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

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

蛋蛋Itachi2020/03/12 15:50:06

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

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

等于

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

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

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

你这比较的有差别吗?答非所问的, kk俺看人家楼下回答的, 在这站着茅坑不拉屎,耽误我功夫

冰2021/10/20 17:05:18

LEY小卤蛋2020/03/12 15:50:06

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

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

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

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

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

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

小哥Stafan2020/03/12 15:50:06

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

小哥卡卡西2020/03/12 15:50:06

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

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

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

Newest Answer