在React的JSX语法中，双花括号的用途是什么？
在React的JSX语法中，双花括号的用途是什么？
提问于 2014-03-27 03:48:31
从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中有没有其他方式来表达同样的东西，或者这只是文档中的一个省略？
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-03-27 03:49:43
它只是一个内联在prop值中的对象文字。它与
var obj = {__html: rawMarkup};
<span dangerouslySetInnerHTML={obj} />Stack Overflow用户
发布于 2018-07-29 10:23:08
React使用JSX，在JSX中计算任何变量、状态对象、表达式等都必须包含在{}中。
在JSX中提供内联样式时，必须将其指定为对象，因此它必须再次位于大括号内。{}。
这就是有两对大括号的原因。
Stack Overflow用户
发布于 2020-04-24 20:09:38
这意味着，您可以只在对象中设置样式属性，而不是声明设置为预期样式属性的对象的样式变量。当要添加的样式很少时，这通常是最佳实践，但是对于需要更多样式的元素，声明样式变量会更简洁
例如，对于具有较少样式属性的元素，执行以下操作
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22671582
复制相关文章
相似问题