[英]Inline style based off JSON value React
I am pulling in JSON and mapping it successfully in a React component. 我正在提取JSON并将其成功映射到React组件中。 However one of the JSON values is a HEX and I want to apply that HEX as an inline style to the background color of one of my div
s. 但是,JSON值之一是HEX,我想将该HEX作为内联样式应用于我div
之一的背景色。
I have tried a bunch of ways but I though it could be done like this. 我已经尝试了很多方法,但是我可以这样做。
<div className="ribbon-wrapper">
<div className="ribbon" style={{backgroundColor: {item.color.tint}}}></div>
</div>
This throws a Syntax error: Unexpected token, expected ,
error. 这将引发Syntax error: Unexpected token, expected ,
错误。 Is there a better way to do this? 有一个更好的方法吗?
Your style
value is a Javascript object so you don't need to escape item.color.tint
. 您的style
值是一个Javascript对象,因此您无需转义item.color.tint
。 You can pass it in directly: 您可以直接传递它:
<div className="ribbon" style={{backgroundColor: item.color.tint}}></div>
像这样直接通过而不带括号
<div className="ribbon" style={{backgroundColor: item.color.tint}}></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.