在 React Js 中循环蚂蚁设计标签颜色

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'
  },
];

我想return使用 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>
})

如何实现？对不起，我的英语不够好。我希望你明白我的意思或者您可以访问代码沙箱 here

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

它会根据索引一个一个地选择数组中的颜色。

在 React Js 中循环蚂蚁设计标签颜色

Looping ant design tag color in React Js

javascript

arrays

api

reactjs

antd