React Js中循环ant设计标签颜色

Question

我使用 Ant Design 和来自 API 的数据。我假设像这样的数据

data = [
  {
     name: "John",
     job: "Freelancer",
  },
  {
     name: 'Bob',
     job: 'UI Designer'
  },
  {
     name: 'Sam',
     job: 'CEO'
  },
  {
     name: 'Alex',
     job: 'Mobile Dev'
  },
  {
     name: 'Jess',
     job: 'Web Dev'
  },
];

我想用 Ant Design 的标签返回作业，该标签具有不同的颜色

<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>

我已经循环了数据。但我不知道如何使数据具有不同的颜色标签

data.map((el) => {
//This example doesn't have color
  return <Tag>{el.job}</Tag>
})

如何实现？抱歉我的英语不够好。我希望你明白我的意思 或者您可以访问代码沙箱此处

Answer 1

在您的数据中，为每个对象添加一个类似 tagColor 的属性。

data = [
    {
     name: "John",
     job: "Freelancer",
     tagColor: "red"
    },
    {
     name: 'Bob',
     job: 'UI Designer'
     tagColor: "green"
    },
    {
     name: 'Sam',
     job: 'CEO'
     tagColor: "blue"
    },
];

然后在循环中，使用该属性动态添加颜色。就像，

data.map((el) => {
  return <Tag color={el.tagColor}>{el.job}</Tag>
});

更新

如果颜色可以是随机的，您可以将所有颜色放入一个数组中。您可以使用索引甚至随机化器逐一选择颜色。就像，

const colors = ["red", "blue", "green"];
data.map((el, i) => {
  return <Tag color={colors[(i%colors.length)]}>{el.job}</Tag>
});

它会根据索引在数组中一一挑选颜色。