0

问题是我想向数组中的每个对象添加某个属性或实际上几个属性，其中一个是背景颜色，具体取决于该数组中同一对象的其他值。因此，假设我有一个对象数组，例如：

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 添加到显示 MyComponent 的 div 中，那么 MyComponent 将具有此类，并且我希望每列都有自己的类或自己的样式。我正在寻找类似属性的每一列 style={backgroundColor: red} 或 columns={columns.forEach(x => x.year % 2 === 0 ? {className: red} : {className: blue} }

这可能吗？

问候，MC

4

2 回答 2

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

工作示例现场演示

于 2020-02-06T10:11:29.627 回答
0

您是否考虑过使用nth-childcss 规则？

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

于 2020-02-06T10:06:17.413 回答