Inline style based off JSON value React

Question

I am pulling in JSON and mapping it successfully in a React component. 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.

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. Is there a better way to do this?

Answer 1

Your style value is a Javascript object so you don't need to escape item.color.tint . You can pass it in directly:

<div className="ribbon" style={{backgroundColor: item.color.tint}}></div>

Answer 2

像这样直接通过而不带括号

<div className="ribbon" style={{backgroundColor: item.color.tint}}></div>