从react.js 教程我们看到双花括号的这种用法：
<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />
<span style={{ color: 'red' }}>
{this.props.product.name}
</span>;
然而，React JSX 文档没有描述或提到双花括号。这是什么语法（双curl）？有没有另一种方法可以在 jsx 中表达同样的东西，或者这只是文档中的一个遗漏？
React 的 JSX 语法中双花括号的目的是什么？
IT技术
javascript
reactjs
2021-04-08 11:36:31
6个回答
它只是一个内联在 prop 值中的对象字面量。它与
var obj = {__html: rawMarkup};
<span dangerouslySetInnerHTML={obj} />
花括号在这里有 2 个用法：-
- { .. } 计算结果为 JSX 中的表达式。
- { 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因为根据React 文档，该style属性接受具有驼峰式属性的JavaScript 对象而不是CSS 字符串。
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
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>