React渲染方法的正確流程類型？

Question

我很好奇React類中的兩個render方法的正確Flow注釋是什么，以及無狀態函數中的簡單return ：

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()方法應該返回什么。