web-dev-qa-db-fra.com

Type de flux approprié pour React render method?

Je suis curieux de savoir quelle est l'annotation Flow appropriée pour les deux méthodes render dans les classes React et les simples returns dans les fonctions sans état:

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

En définissant le type de retour intentionnellement incorrect (sur un nombre), j'ai eu cette erreur:

  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

Donc, changer le code en ceci semble satisfaire Flow:

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

Je me demande si c'est correct, et si oui, où est-ce documenté?

javascriptreactjsflowtype
18
ffxsam

Vous n'avez pas besoin de pour annoter la méthode de rendu, Flow devrait être en mesure d'inférer le type de sortie car il sait à quoi servent les désucres JSX.

Flow a un React interface intégré, où tout cela est défini:

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

Puis

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

Donc, si vous souhaitez fournir un type de retour explicite d'une méthode de rendu, vous pouvez utiliser cette signature. Eh bien, peut-être sans point d'interrogation si vous savez que vous ne retournez pas nul. Je ne sais pas s'il y a un quelconque effet à omettre <any>.

28
Nikita

Selon Documentation de flux: React: Type Reference , le type correct est React.Node :

import * as React from 'react';

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

Cela représente n'importe quel nœud qui peut être rendu dans une application React. React.Node Peut être indéfini, nul, un booléen, un nombre, une chaîne, un React élément, ou un tableau de l'un de ces types récursivement.

Si vous avez besoin d'un type de retour pour vos méthodes render() de composant ou si vous avez besoin d'un type générique pour un accessoire enfant, vous devez utiliser React.Node.

Cependant, les exemples de la documentation n'écrivent généralement pas le type de render() de manière explicite. Ils écrivent seulementReact.Component Et le type des accessoires, comme ceci:

import * as React from 'react';

type Props = {
  foo: number,
  bar?: string,
};

class MyComponent extends React.Component<Props> {
  render() {
    return <div>{this.props.bar}</div>;
  }
}

En effet, l'extension de React.Component Indique automatiquement à Flow ce que la méthode render() doit renvoyer.

6
Rory O'Kane