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

Question

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

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

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

  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

因此，将代码更改为这样似乎可以满足流程：

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

因此，如果您想提供显式 return 类型的渲染方法，您可以使用该签名。好吧，如果知道您不是 returning null，也许没有问号。不确定省略 <any>.

是否有任何影响

Answer 2

根据Flow documentation: React: Type Reference, the correct type is React.Node：

import * as React from 'react';

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

This represents any node that can be rendered in a React application. React.Node can be undefined, null, a boolean, a number, a string, a React element, or an array of any of those types recursively.

If you need a return type for your component render() methods or you need a generic type for a children prop then you should use 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() 方法应该 return.

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

Proper Flow type for React render method?

javascript

reactjs

flowtype