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

Question

我很好奇renderReact类中的两个方法的正确Flow注释是什么,以及return无状态函数中的简单s:

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

你不需要注释render方法,Flow应该能够推断出输出类型,因为它知道JSX所依赖的东西.

Flow有一个内置的React 接口,其中定义了所有这些东西:

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

然后

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

因此,如果要提供呈现方法的显式返回类型,则可以使用该签名.好吧,如果知道你没有返回null,也许没有问号.不确定是否有任何影响省略<any>.

Answer 2

根据Flow文档: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()方法,或者你需要一个子类prop的泛型类型,那么你应该使用React.Node.

但是,文档中的示例通常不会render()明确地写出类型.他们只写出 React.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()方法应该返回什么.