React 渲染方法的正确流类型？

Question

我很好奇，对于 React 类中的 render 方法和无状态函数中的简单 returns，正确的 Flow 注释是什么：

const UserProfilePage = () => {
  return <div className="container page">
    <UserProfileContainer />
  </div>
};

故意将返回类型设置为不正确（为数字），我得到了这个错误：

  8:   return <div className="container page">
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element: `div`
  8:   return <div className="container page">
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with the expected return type of
  7: const UserProfilePage = (): number => {
                                 ^^^^^^ number

所以，把代码改成这样似乎就满足Flow了：

const UserProfilePage = (): React$Element => {
  return <div className="container page">
    <UserProfileContainer />
  </div>
};

我想知道这是否正确，如果正确，记录在哪里？

Answer 1

您不需要注释渲染方法，Flow 应该能够推断输出类型，因为它知道 JSX 去糖的目的。

Flow 有一个内置的 React interface，其中定义了所有这些东西：

declare class React$Element<Config> {
  type: ReactClass<Config>;
  props: $PropsOf<Config>;
  key: ?string;
  ref: any;
}

然后

render(): ?React$Element<any>;

因此，如果您想提供一个渲染方法的显式返回类型，您可以使用该签名。好吧，如果知道你没有返回 null，也许没有问号。不确定省略<any> 是否有任何影响。

Answer 2

根据Flow documentation: React: Type Reference，正确的类型是React.Node：

import * as React from 'react';

class MyComponent extends React.Component<{}> {
  render(): React.Node {
    // ...
  }
}

这表示可以在 React 应用程序中呈现的任何节点。 React.Node 可以是 undefined、null、布尔值、数字、字符串、React 元素或任何这些类型的递归数组。

如果您的组件render() 方法需要返回类型，或者子属性需要泛型类型，那么您应该使用React.Node。

但是，文档中的示例通常不会明确写出render() 的类型。他们only write outReact.Component和道具的类型，像这样：

import * as React from 'react';

type Props = {
  foo: number,
  bar?: string,
};

class MyComponent extends React.Component<Props> {
  render() {
    return <div>{this.props.bar}</div>;
  }
}

这是因为扩展 React.Component 会自动告诉 Flow render() 方法应该返回什么。