Javascript 从API传递获取的数据，并使用React和Sass将其用于设置按钮的样式

我从一个API中获取了一些数据，并使用该API创建了一个按钮列表。假设我收到的数据如下所示-

  { name: "bob", colorCode: "#DC7472" },
  { name: "ben", colorCode: "#69DCD1" },
  { name: "john", colorCode: "#1570C5" },
  { name: "joe", colorCode: "#1550C4" }
];

{
 bob:false,
 ben:false,
 john:false,
 joe:false
}

使用这些数据，我创建了按钮，按钮的名称对应于每个数组项中的name属性

每个按钮的初始状态都为false，单击按钮后，它将切换为true和false

现在，当按钮的任何状态为true时，我想使用背景色作为相应的colorCode属性，并将按钮文本颜色设置为白色

类似地，当它为false时，我希望按钮文本具有相应的colorCode属性，背景颜色为白色

初始状态如下所示-

  { name: "bob", colorCode: "#DC7472" },
  { name: "ben", colorCode: "#69DCD1" },
  { name: "john", colorCode: "#1570C5" },
  { name: "joe", colorCode: "#1550C4" }
];

{
 bob:false,
 ben:false,
 john:false,
 joe:false
}

你可以在这里找到代码-

我正在努力研究如何使用React和Sass实现这一目标？

您可以这样做：

style={domain[each.domainName]? { color: each.colorCode, backgroundColor: "white" } : null}

---

更新：

请与您目前拥有的代码共享。@TJ您可以在stackblitz上找到我的代码。您是在使用状态组件还是功能组件与react？@JérômeW使用功能组件谢谢@TJ。我一直在努力解决这个问题。你可以做这个

style={domain[each.domainName]？{color:each.colorCode，backgroundColor:“white”}:{color:“white”，backgroundColor:each.colorCode}

这样文本颜色和背景就会切换correctly@TonyZhang是的，我做到了。非常感谢：）@MohitChauhan顺便说一句，您也可以这样做：，直接使用api响应作为初始值state@TJ现在我可以把头绕在它身上了。但如果我想添加更多样式，而不考虑三元运算符，该怎么办呢。这两种情况下都有相同的样式