我使用來自 API 的 Ant Design 和資料。我假設這樣的資料
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>
})
如何做到這一點？對不起，我的英語不夠好。我希望你明白我的意思或者你可以在這里訪問代碼沙箱
uj5u.com熱心網友回復：
在您的資料中，為每個物件添加一個類似于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>
});
它將根據索引一一選擇陣列中的顏色。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/449939.html
標籤：javascript 数组 反应 api 蚂蚁