Question

我很好奇React类中的render方法和无状态函数中的简单return方法的正确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

你不需要需要来注释render方法，Flow应该能够推断出输出类型，因为它知道JSX去了什么。

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

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

然后

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

因此，如果要提供render方法的显式返回类型，则可以使用该签名。好吧，如果知道你没有返回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可以是未定义的，null，布尔值，数字，字符串，React元素或递归的任何类型的数组。

如果您需要某个组件render()方法的返回类型，或者您需要一个儿童道具的泛型类型，那么您应该使用React.Node。

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

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

2 个答案: