Добавить css стиль (или класс) к каждому элементу массива объектов в компоненте.

Question

проблема в том, что я хочу добавить определенное свойство или несколько свойств, одним из которых является цвет фона, к каждому объекту в массиве в зависимости от другого значения того же объекта в этом массиве. Допустим, у меня есть массив объектов, таких как:

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});

Теперь я хочу добавить стили, например backgroundColor, в зависимости от года, если он нечетный или четный. например, четный год должен быть красного цвета, а нечетный год должен быть синим. Допустим, у меня есть следующий код:

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

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

Если я добавлю className в div, который отображает MyComponent, то MyComponent будет иметь этот класс, и я хочу, чтобы у каждого столбца был свой класс или собственный стиль. Я ищу что-то вроде свойства для каждого столбца style = {backgroundColor: red} или columns = {columns.forEach (x => x.year% 2 === 0? {ClassName: red}: {className: blue} }

Возможно ли это?

Привет, M C

Answer 1

Так вы можете проверить четность / нечетность и изменить цвет списков.

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>
  );
}

Рабочий пример Демонстрационная версия

Answer 2

Рассматривали ли вы использование nth-child css правил?

https://developer.mozilla.org/es/docs/Web/CSS/: nth-child