从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中有没有其他方式来表达同样的东西,或者这只是文档中的一个省略?
发布于 2014-03-27 03:49:43
它只是一个内联在prop值中的对象文字。它与
var obj = {__html: rawMarkup};
<span dangerouslySetInnerHTML={obj} />
发布于 2018-07-29 10:23:08
React使用JSX,在JSX中计算任何变量、状态对象、表达式等都必须包含在{}中。
在JSX中提供内联样式时,必须将其指定为对象,因此它必须再次位于大括号内。{}。
这就是有两对大括号的原因。
发布于 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>
https://stackoverflow.com/questions/22671582
复制相似问题