使用 Flow 的互斥属性

Question

I'm building a UI component in the company I work for. It's in React Native and it uses Flow to typecheck. Thing is I want the components to have certain variants but they force me to have nothing but booleans for components attributes. And I'd like the components to disallow the use of more than one variant.

Let's say my component <Button> has two variants: primary and secondary . If I could use an attribute variant it would be easier because I would be able to use variant='primary' . But I can't do that. It has to be primary=true but I have to make it exclusive: if I have primary:true you shouldn't be allowed to use secondary:true in the same component.

I'been checking the docs but I couldn't find a way. And it makes sense, why would you have one? Just stop using boolean 's for everything, right?

Question is: Is there a way?

Answer 1

Not sure I follow all the magic you're trying to implement, but this one:

if I have primary:true you shouldn't be allowed to use secondary:true in the same component.

Is quite easy to achieve with exact object types . Just create 2 different exact object types and mark component props as one of those:

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