css - 基于 JSON 值 React 的内联样式

Question

我正在提取 JSON 并将其成功映射到 React 组件中。但是，其中一个 JSON 值是 HEX，我想将该 HEX 作为内联样式应用于我的一个 div 的背景颜色。

我已经尝试了很多方法，但我认为可以这样做。

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

这会抛出一个 Syntax error: Unexpected token, expected , 错误。有更好的方法吗？

Answer 1

您的 style 值是一个 Javascript 对象，因此您不需要转义 item.color.tint。可以直接传入:

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