Question

我有一个将颜色映射为值的查找数组。传入的值可以来自多个属性，例如

const data = {
  status4Weeks: "2",
  status8Weeks: "3",
  status12Weeks: "4"
};

我的查找将找到例如“ 4”的值，并为4分配一种颜色。目前，我必须为3个属性编写3个相同的映射。我需要进行某种形式的映射，以查看键，分配颜色并将其映射到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
];

有关完整的代码，请参见我的代码框：https://codesandbox.io/s/pj0yk6z91x

我确定此页面上的代码太多，无法确定！

Answer 1

您可以更改颜色的映射方式：您可以使用字符串数字值，而不是使用单词属性名称，例如：

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]

通过这种访问方式，您可以轻松地映射数组。

做出反应，如何为效率多映射值

1 个答案: