将枚举映射到值

Question

我正在使用徽章组件

<Badge statusColour={value} label={value} />

从 API 中，我得到一个状态，其中包含以下枚举：

enum Status {
  Requested = 'Requested',
  Approved = 'Approved',
  Declined = 'Declined',
}

Badge 组件 statusColour 道具仅采用以下颜色字符串：“attention”、“resolved”、“rejected”。

每个状态枚举都有其对应的状态颜色

  Requested = 'attention',
  Approved = 'resolved',
  Declined = 'rejected',

有没有办法将状态枚举映射到颜色字符串，以便当我像这样使用徽章组件时：

const value = Status.Requested
<Badge statusColour={value} label={value} />

status 中的值是：'attention'

标签中的值为：'Requested'

附言我正在使用 TypeScript。

Answer 1

您可以通过索引状态颜色枚举（即 StatusColor[value]）来查找它。

完整示例

enum Status {
  Requested = 'Requested',
  Approved = 'Approved',
  Declined = 'Declined',
}

enum StatusColor {
  Requested = 'attention',
  Approved = 'resolved',
  Declined = 'rejected',
}

const valueToColor = (value: Status): StatusColor => StatusColor[value];

console.log(valueToColor(Status.Requested)); // attention