javascript - 如何在 ReactJs typescript 中将多个枚举值传递给变量

Question

我有COLOR枚举声明如下..

export declare enum COLOR {
    RED = "RED",
    BLUE = "BLUE",
    YELLOW = "YELLOW"
}


interface IProps {
  config?: {
    disallowedColors: COLOR;
  };

现在我需要访问值config.disallowedColors 。如果我想将多种颜色传递给 config.disallowedColors ， 我怎么做 ？？例如我要config.disallowedColors = red, yellow

有人可以在这里解释一下吗？

Answer 1

鉴于枚举值是字符串，一个简单的数组就足够了，即 config.disallowedColors = [COLOR.RED, COLOR.YELLOW]。

检查时，您可以利用 includes/some 等来检查是否设置了标志，例如

config.disallowedColors.includes(COLOR.RED);

当您需要检查多个值时，情况会变得稍微复杂一些，一种选择是为您要检查的值是否存在创建一个临时数组，然后利用 every 比较每个值到目标数组，即

const flags = [COLOR.RED, COLOR.YELLOW];
const { disallowedColors } = config;
flags.every(c => disallowedColors.includes(c));

或者，如果您使用数值，则可以利用 Bitwise Operations创建一个位掩码，它会给你相同的结果(只是以不同的方式)，即

// values should be ^2
enum COLOR {
  NONE = 0
  RED = 1,
  BLUE = 2,
  YELLOW = 4,
  ...
}
...
// setting multiple flags
const colors = COLOR.RED | COLOR.YELLOW;
// check for existence of single flag
const isRed = (colors & COLOR.RED) === COLOR.RED;
// check for existence of multiple flags
const flags = COLOR.RED | COLOR.YELLOW;
const hasMultiple = (colors & flags) === flags;