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