在 React 的 JSX 语法中，双大括号的目的是什么？

javascript reactjs

2022-08-30 02:36:55

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

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

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

但是，React JSX 文档没有描述或提及双大括号。这种语法（双卷发）有什么用？有没有另一种方式在jsx中表达同样的事情，或者这只是文档中的遗漏？

答案 1

它只是一个嵌入在 prop 值中的对象文本。它与

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

答案 2

卷曲大括号在这里有2种用法：-

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

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

如果你观察到被大括号包围。这就是嵌入变量的JSX方式。可以是任何 Javascript 表达式/变量/对象。你也可以做一些类似 { 2+3 } 的事情，它的计算结果会为 { 5 }picpic

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

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