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

Question

如果我有这样的东西

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

我将如何使用 Flow 输入注释 return 类型，即下面代码中的 /* ??? */ 应该替换什么？

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

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

Answer 1

结果是 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 2

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

正如您在 its definition 中所读到的那样 React$Element 有一个类型参数 Config 本身并不是很有用，它的存在只是为了与 [=17= 的定义保持一致].

所以你的定义可以写成

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

Answer 3

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

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 return 类型是什么？

What is the Flow return type of a React stateless functional component?

javascript

reactjs

typing

flowtype

static-typing