基于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>

Answer 2

直接传递它没有像这样的括号

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