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

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>
)

编辑:这就是Flow文档对无状态功能组件的看法.我可能是盲人,但我看不到有关返回类型的任何内容,只有道具类型.

Answer 1

纯组件的返回类型(与render普通组件的功能相同)是?React$Element<any>.

正如你在其定义中 React$Element所读到的那样,有一个类型参数Config,它本身并不是非常有用,只是为了与定义的一致性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>
)

甚至

import React from 'react'

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