Javascript 向组件中对象数组的每个元素添加css样式（或类）

问题是，我想根据数组中同一对象的其他值，向数组中的每个对象添加某个属性或几个属性，其中一个是背景色。 假设我有一组对象，比如：

let myObj = {
    name: "myObj1",
    value: 12,
    year: 2020
}
/* So the array looks like this: */
let columns = [];
columns.push({name:"myObj1",value:12,year:2020});
columns.push({name:"myObj2",value:3,year:2019});
columns.push({name:"myObj3",value:7,year:2018});

现在，我想根据年份的不同，添加类似样式的背景色，无论是奇数还是偶数。 例如，偶数年应为红色，奇数年应为蓝色。 假设我有以下代码：

class App1 extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <MyCompononent columns={columns} />
            </div>
        )
    }
}

类App1扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}

如果我将className添加到显示MyComponent的div中， 然后MyComponent将有这个类，我希望每个列都有自己的类 或者它自己的风格。 我在为每一列寻找类似属性的内容 样式={backgroundColor:red} 或columns={columns.forEach（x=>x.year%2===0？{className:red}:{className:blue}

这可能吗

您好，

---

MC

您是否考虑过使用第n个子项的css规则

---

这是检查列表的偶数/奇数和更改列表颜色的方法

export default function App() {
  let columns = [];
  columns.push({ name: "myObj1", value: 12, year: 2020 });
  columns.push({ name: "myObj2", value: 3, year: 2019 });
  columns.push({ name: "myObj3", value: 7, year: 2018 });
  return (
    <div className="App">
      <ul>
        {columns.map(({ year, name }, index) => (
          <li
            key={index}
            style={{ backgroundColor: year % 2 === 0 ? "red" : "blue" }}
            >
            {name}-{year}
          </li>
        ))}
      </ul>
    </div>
  );
}

导出默认函数App（）{
让列=[]；
push（{name:“myObj1”，值：12，年份：2020}）；
push（{名称：“myObj2”，值：3，年份：2019}）；
push（{名称：“myObj3”，值：7，年份：2018}）；
返回(

{columns.map（{year，name}，index）=>(

{name}-{year}

))}

);
}

---

工作示例

它将不起作用。我的样式设置基于数组中对象的属性。n个子元素每n个元素都会出现…看起来不错，但您创建了无序列表…我正在渲染我的组件…但是啊哈idk