Question

如果我有这样的东西

const RandomComponent = (props) => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent type={props.type} />
  </div>
)

我将如何键入使用Flow注释返回类型，即在下面的代码中应该替换/* ??? */的内容？

const RandomComponent = (props: { id: string, vino: number): /* ??? */ => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent veryImportantNumber={props.vino} />
  </div>
)

编辑：This是Flow文档对无状态功能组件的评价。我可能是盲人，但我看不到有关返回类型的任何内容，只有道具类型。

Answer 1

纯组件的返回类型（与普通组件的render函数的类型相同）为?React$Element<any>。

正如您在its definition React$Element中所读到的那样，类型参数Config本身并不是非常有用，只是为了与{{的定义保持一致1}}。

所以你的定义可以写成

ReactClass

或者如果您愿意

const RandomComponent = (props: { id: string, vino: number }): React$Element<any> => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent veryImportantNumber={props.vino} />
  </div>
)

甚至

import type { Element } from 'react'

const RandomComponent = (props: { id: string, vino: number }): Element<any> => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent veryImportantNumber={props.vino} />
  </div>
)

Answer 2

原来它是React.Element，这是一个polymorphic type（我不是100％确定它意味着什么），所以正确的（足够的）代码将是

const RandomComponent = (props: { id: string, vino: number): React.Element<*> => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent veryImportantNumber={props.vino} />
  </div>
)

Answer 3

根据您的.flowconfig，设置React$Element<any>作为返回类型可能会引发以下错误：

error Unexpected use of weak type "any" flowtype/no-weak-types

为了避免这种情况，要么根本不传递任何类型：

type PropsType = { foo: string }

const Baz = (props: PropsType): React$Element =>
  <h1>Hello, { props.foo }</h1>

或者，传递props类型别名，而不是any：

type PropsType = { foo: string }

const Baz = (props: PropsType): React$Element<PropsType> =>
  <h1>Hello, { props.foo }</h1>

什么是React无状态功能组件的Flow返回类型？

3 个答案: