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种不同的确切对象类型并将组件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

使用Flow

1 个答案: