使用 Flow 的互斥属性

Question

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

假设我的组件 <Button> 有两个变体：primary 和 secondary。如果我可以使用属性variant，那会更容易，因为我可以使用variant='primary'。但我不能那样做。它必须是primary=true，但我必须让它独占：如果我有primary:true，你不应该被允许在同一个组件中使用secondary:true。

我一直在检查docs，但找不到方法。这是有道理的，你为什么会有一个？停止使用boolean 的所有内容，对吧？

问题是：有办法吗？

Answer 1

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

如果我有 primary:true 你不应该被允许在同一个组件中使用 secondary:true。

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

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