时间戳

首页 > 解决方案 > 如何根据数组索引更改文本颜色？

javascript - 如何根据数组索引更改文本颜色？

问题描述

所以我有这个代码。我想根据数组索引创建一个剥离的颜色。如果索引是偶数，我想要“这个”颜色，如果索引是奇数，我想要“那个”颜色。

这是我的代码：

function App() {
  const ships = [
    {
      id: 1,
      name: "Admiral Hipper",
      type: "Heavy Cruiser",
      faction: "Kriegsmarine",
    },
    {
      id: 2,
      name: "USS Essex",
      type: "Aircraft Carrier",
      faction: "United States Navy",
    },
    {
      id: 3,
      name: "IJN Ayanami",
      type: "Destroyer",
      faction: "Imperial Japanese Navy",
    },
    { id: 4, name: "HMS Rodney", type: "Battleship", faction: "Royal Navy" },
  ];

  const handleColor = (ship) => {
    if (ships.length % 2 == 0) {
      return <p style={{ color: "red" }}>{ship.name}</p>;
    } else {
      return <p style={{ color: "blue" }}>{ship.name}</p>;
    }
  };

  return (
    <div className="App">
      {ships.map((ship) => {
        return <p>{handleColor(ship)}</p>;
      })}
    </div>
  );
}

export default App;

标签： javascripthtmlreactjs

解决方案

在您的handleColor 函数中，您正在检查数组的长度，ships它是一个常数。所以，你会为每个元素获得相同的颜色。

map您可以在函数中获取当前元素的索引。然后你可以在那里查看索引。

你可以像这样轻松地做到这一点。

return (
    <div className="App">
      {ships.map((ship, index) => {
        return <p style={{ color: index % 2 ? "blue" : "red" }}>{ship.name}</p>;
      })}
    </div>
);

请检查这个 jsFiddle。 https://jsfiddle.net/40vdckwx/3/

推荐阅读