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

【问题标题】：What is the Flow return type of a React stateless functional component?React 无状态功能组件的 Flow 返回类型是什么？
【发布时间】：2017-03-16 17:14:57
【问题描述】：

如果我有这样的事情

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 文档对无状态功能组件的看法。我可能是盲人，但我看不到任何关于返回类型的信息，只有道具类型。

【问题讨论】：

为什么要指定返回类型？它是一个组件，所以你不会总是返回它的元素吗？
我想这样做是因为与其他函数声明的一致性，并且因为有时一个组件可以返回null 或一个组件，但问题确实是好奇心之一，我想它真的“JSX 块的类型/React.createElement 的返回类型是什么？”

标签： javascript reactjs typing flowtype static-typing

【解决方案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>
)

【讨论】：

请注意React.Element 不是有效类型。您可以使用的实际类型是React$Element<*>。
我首先找到了React$Element，但后来我查看了flow's source code，发现它被用作React.Element。知道为什么吗？
有趣。我想如果 React 被导入然后你可以使用它
添加到我的回答中

【解决方案2】：

纯组件的返回类型（与普通组件的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>
)

【讨论】：

通常any 应该是内部组件类型。但是如果你使用的是带有箭头函数的无状态函数组件，这似乎很难知道在那里使用什么？

【解决方案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>

【讨论】：