React如何多映射值以提高效率
提问于 2019-02-25 11:42:35
我有一个查找数组，它将颜色映射到一个值上。传入的值可以来自多个属性，例如
const data = {
status4Weeks: "2",
status8Weeks: "3",
status12Weeks: "4"
};我的查找将找到值，例如"4“，并给4一个指定的颜色。目前，我不得不为这3个属性编写3个相同的映射。我需要做一些映射，查看键，分配颜色，并将其映射到UI中。我的UI也被复制了3次。
const COLORS = {
one: "#4caf50",
two: "#81c784",
three: "#ffee58",
four: "#FFC107",
five: "#ff7043",
six: "#f44336",
seven: "#455a64"
};
const status4WeeksColor = [
data.status4Weeks === "1"
? COLORS.one
: data.status4Weeks === "2"
? COLORS.two
: data.status4Weeks === "3"
? COLORS.three
: data.status4Weeks === "4"
? COLORS.four
: data.status4Weeks === "5"
? COLORS.five
: data.status4Weeks === "6"
? COLORS.six
: data.status4Weeks === "7"
? COLORS.seven
: COLORS.seven
];下面是其他两个属性的副本...
const status8WeeksColor = [
data.status8Weeks === "1"
? COLORS.one
: data.status8Weeks === "2"
? COLORS.two
: data.status8Weeks === "3"
? COLORS.three
: data.status8Weeks === "4"
? COLORS.four
: data.status8Weeks === "5"
? COLORS.five
: data.status8Weeks === "6"
? COLORS.six
: data.status8Weeks === "7"
? COLORS.seven
: COLORS.seven
];
const status12WeeksColor = [
data.status12Weeks === "1"
? COLORS.one
: data.status12Weeks === "2"
? COLORS.two
: data.status12Weeks === "3"
? COLORS.three
: data.status12Weeks === "4"
? COLORS.four
: data.status12Weeks === "5"
? COLORS.five
: data.status12Weeks === "6"
? COLORS.six
: data.status12Weeks === "7"
? COLORS.seven
: COLORS.seven
];完整的代码见我的codesandbox：https://codesandbox.io/s/pj0yk6z91x
我敢肯定，这个页面上的代码太多了！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-25 11:50:45
您可以更改映射颜色的方式:可以使用字符串数值代替word属性名称，如下所示：
const COLORS = {
'1': "#4caf50",
'2': "#81c784",
'3': "#ffee58",
'4': "#FFC107",
'5': "#ff7043",
'6': "#f44336",
'7': "#455a64"
}通过这种方式，您只需：
const status4WeeksColor = COLORS[data.status4Weeks]
// or const status8WeeksColor = COLORS[data.status8Weeks]
// or const status12WeeksColor = COLORS[data.status12Weeks]如果你需要一个默认值，你可以这样做：
const DEFAULT = '7'
const status4WeeksColor = COLORS[data.status4Weeks] || COLORS[DEFAULT]通过这种访问，您可以轻松地映射您的数组。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54865409
复制相关文章
腾讯云开发者
