web-dev-qa-db-ja.com

React render method？

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

これが正しいかどうか疑問に思っています。もしそうなら、これはどこに文書化されていますか？

javascriptreactjsflowtype
18
ffxsam

Renderメソッドに注釈を付ける必要はありませんneed、FlowはJSXがデシュガーする対象を知っているため、出力タイプを推測できるはずです。

フローには組み込みのReact interface があり、このすべてが定義されています：

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

その後

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

したがって、レンダリングメソッドの明示的な戻り値の型を提供する場合は、その署名を使用できます。おそらく、nullを返していないことがわかっている場合は、疑問符が付いていません。 <any>を省略しても効果があるかどうかはわかりません。

28
Nikita

フローのドキュメント：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()のタイプを明示的に記述していません。これらは 書き込みのみ _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_を拡張すると、render()メソッドが返すものをFlowに自動的に伝えるためです。

6
Rory O'Kane