Как передать несколько значений перечисления в переменную ReactJs машинопись

Question

У меня есть COLOR enum, объявленный как показано ниже.

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 et c. чтобы проверить, установлен ли флаг, например,

config.disallowedColors.includes(COLOR.RED);

Это становится немного сложнее, когда вам нужно проверить несколько значений, одним из вариантов будет создание временного массива для значений, которые вы хотите проверить, присутствуют, а затем использовать every, сравнивая каждый из них с целевым массивом, т.е.

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

В качестве альтернативы, если вы использовали числовое значение, вы могли бы использовать Побитовые операции , чтобы создать битовую маску, которая бы дать вам тот же результат (просто по-другому) то есть

// 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;