如何指定Flowjs中所需的两个道具之一？

Question

我有各种React组件,当传入不同的道具时可以有不同的功能.通常我遇到一些分支逻辑,如果prop1存在,做一件事,但如果prop2存在则做其他事情.

一个示例可以是具有带有不同参数的输入的元素的两个更改处理程序.

有没有办法在Flowjs中指定需要两个处理程序之一？

Answer 1

幸运的是,您想要的Flow类型注释可以应用于React之外的上下文中.通常,如果您想要独占或类型检查,您可以这样做:

type Something = {
    prop1: number,
    prop2?: null
}

type Another = {
    prop1?: null,
    prop2: number
}

function foo(parameter: Something | Another) {

}

foo({ prop1: 10 }); // Good
foo({ prop2: 10 }); // Good
foo({ prop1: 10, prop2: 10 }); // Bad

如果您想要包含或类型检查,您可以这样做:

type Something = {
    prop1: number,
    prop2?: null
}

type Another = {
    prop1?: null,
    prop2: number
}

type SomethingAndAnother = {
    prop1: number,
    prop2: number
}

function foo(parameter: Something | Another | SomethingAndAnother) {

}

foo({ something: 10, prop1: 10 }); // Good
foo({ something: 10 }); // Bad
foo({ prop1: 10 }); // Good
foo({ prop2: 10 }); // Good
foo({ prop1: 10, prop2: 10 }); // Good

在React中,您可以在props属性上定义类型,如下所示:

class TodoList extends React.Component {
  props: Something | Another;

  render(): React.Element {
    return (
      // ....
    )
  }
}