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

Question

在react.js教程中,我们看到了双花括号的这种用法:

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

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

但是,React JSX文档没有描述或提到双花括号.这个语法是什么(双重卷曲)？是否有另一种方式在jsx中表达相同的东西或者这只是文档中的遗漏？

Answer 1

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

随意向文档制作PR以使其更清晰! (11认同)
@Brian:请参阅https://github.com/facebook/react/issues/2256#issuecomment-63031960(和https://github.com/facebook/react/blob/6f44f6049edfd7a66448ac50cd4415f6c26fd4b5/docs/tips/19--dangerouslySetInnerHTML. MD). (2认同)

Answer 2

卷曲括号有2个用法: -

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

<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官方文档,style属性接受JavaScript对象而不是CSS字符串.

Answer 4

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

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

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