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

编辑:This是 Flow 文档中关于无状态功能组件的内容。我可能是盲人，但我在那里看不到任何关于返回类型的信息，只有 prop 类型。

Answer 1

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

正如您在 its definition 中所读到的那样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>
)