使用Flow的互斥属性

Posted 2023-01-20

我正在为所工作的公司构建UI组件。它在React Native中，并使用Flow进行类型检查。问题是我希望组件具有某些变体，但是它们迫使我除了组件属性的booleans外什么都没有。而且我希望这些组件禁止使用多个变体。

假设我的组件<Button>有两个变体：primary和secondary。如果我可以使用属性variant，它将更加容易，因为我可以使用variant='primary'。但是我做不到。它必须是primary=true，但我必须使其排他：如果我有primary:true，则不应允许您在同一组件中使用secondary:true。

我正在检查docs，但找不到方法。这很有意义，为什么要有一个？只需停止对所有内容使用boolean，对吧？

问题是：有办法吗？

答案

不确定我是否遵循您尝试实现的所有魔术，但是这一魔术：

如果我有primary：true，则不应在同一组件中使用secondary：true。

使用exact object types非常容易实现。只需创建2种不同的确切对象类型并将组件prop标记为其中之一：

type TPrimary = |
  primary: boolean,
|;

type TSecondary = |
  secondary: boolean,
|;

type T = TPrimary | TSecondary;

const C = (props: T) => <div ...props />

const mounted = <C primary  />;

const mounted2 = <C secondary  />;

// error
const mounted3 = <C primary secondary  />

Try