Javascript 流-字符串的组合

我在react项目中使用流类型检查器。我有一个组件，如下所示：

// @flow
import React, { type Node } from 'react';

type Props = {
  isLoading?: boolean,
  children: Node,
  modifier: '' | '--medium' | '--dark' | '--green',
}

const PulsingCircleLoader = ({ children, isLoading, modifier }: Props) => (
  isLoading ?
    <div class={`PulsingCircleLoader ${modifier}`}>
      <div class="double-bounce1" />
      <div class="double-bounce2" />
    </div>
    :
    <span>{children}</span>
);

PulsingCircleLoader.defaultProps = {
  isLoading: false,
  modifier: '',
};

/@flow
从“React”导入React，{type Node}；
类型道具={
isLoading？：布尔值，
子节点：，
修饰符：“|”-中“|”-深“|”-绿“，
}
const PulsingCircleLoader=（{子项，isLoading，修饰符}:Props）=>(
孤岛？
:
{儿童}
);
PulsingCircleLoader.defaultProps={
孤岛加载：false，
修饰符：“”，
};

---

我使用

modifier

prop切换组件的样式。现在我想为自己辩护，不接受布拉布拉赫作为修饰语，但我想接受：

''或'-medium'或'-dark'或'-green'

或它们的组合，如：

--medium--green
。我怎样才能做到这一点呢？
像这样使用
UnionType
：

type Modifier = '' | '--medium' | '--dark' | '--green';

和类型道具将是：

type Props = {
  isLoading?: boolean,
  children: Node,
  modifiers: Modifier[],
}

然后像这样使用它：

const PulsingCircleLoader = ({ children, isLoading, modifiers }: Props) => (
  isLoading ?
    <div class={`PulsingCircleLoader ${modifiers.join(' ')}`}>
      <div class="double-bounce1" />
      <div class="double-bounce2" />
    </div>
    :
    <span>{children}</span>
);

constpulsingCircleLoader=（{子项，isLoading，修饰符}:Props）=>(
孤岛？
:
{儿童}
);
必须使用复合类型，因为不能附加字符串值等文字类型来形成新的组合类型。例如，用一个元组试试，有点像
['--light'，'--red']
@t或者一个数组可以作为一个解决方案，你能提供一个例子吗？首先，我尝试分离正交类型：例如
亮度
/
颜色
，因为
--绿色
和
--蓝色
的组合可能没有意义。然后你可以把它们组合成一个元组。请注意，元组不是数组，至少从类型级别来看是这样。我知道联合类型，但我希望避免显式声明每个组合。只有三个修改器，它将使9个可能的组合。虽然这可能是唯一的解决办法…是的，我知道。。。让我们看看，也许有一个更好的解决方案，从中用union覆盖所有可能的解决方案。@Tomasz u可以尝试这样的方法：好吧，一系列修饰符可能就是我要找的东西。我的意思是
修饰符：修饰符[]
应该足够好了。