无法在 if/else 代码块中正确设置元素样式

Question

我有一些来自虚拟后端的数据，例如：

[

 {

  "title": "title title 0",

  "date": "22/09/2015",

  "author": "author00",

  "langs": [

   "react",

   "javascript"

   ]

 },

 {

 "title": "title 1",

 "date": "09/11/2012",

 "author": "author188",

 "langs": [

 "angular",

 "vue"

   ]

 }],

我尝试通过它的第一个元素来风格化“langs”数组，例如：

const posts = this.state.posts.map(post => {

      if (post.tags[0].startsWith("react")){

        post.style.backgroundColor = "red";

        }

      }

我认为“if”语句是正确的，但我不知道在代码块中尝试什么。当我尝试登录控制台时，它可以。但是这种情况下的很多事情取决于数组中的第一个 [0] 元素是什么......

例如，如果第一个元素在 cideblock 中包含 'angular'，则许多样式选项必须重新排列为红色，并且当它包含 'react' 时，每种情况下的主导样式颜色都必须是蓝色。你能告诉我用 if/else 语句改变很多东西的风格的最佳解决方案是什么？

Answer 1

制作一个颜色图，定义代码标签的颜色，如下所示：const colorMap = { 'react': 'red', 'angular': 'blue' };然后像这样使用它：const posts = this.state.posts.map(post => {      const tag = post.tags[0];      const color = colorMap[tag];      post.style.backgroundColor = color;});