如何指定 Flowjs 中所需的两个道具之一?
How to specify one of two props required in Flowjs?
我有各种 React 组件,当传入不同的道具时,它们可以具有不同的功能。我经常遇到一些分支逻辑,如果 prop1
存在,则做一件事,但如果 prop2
在场做其他事情。
一个示例可以是一个元素的两个更改处理程序,其输入采用不同的参数。
有没有办法在 Flowjs 中指定需要两个处理程序之一?
幸运的是,您想要的 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 (
// ....
)
}
}
枚举怎么样:
type Props = {
['prop1' | 'prop2']: string,
}
我有各种 React 组件,当传入不同的道具时,它们可以具有不同的功能。我经常遇到一些分支逻辑,如果 prop1
存在,则做一件事,但如果 prop2
在场做其他事情。
一个示例可以是一个元素的两个更改处理程序,其输入采用不同的参数。
有没有办法在 Flowjs 中指定需要两个处理程序之一?
幸运的是,您想要的 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 (
// ....
)
}
}
枚举怎么样:
type Props = {
['prop1' | 'prop2']: string,
}