Type de débit approprié pour la méthode de rendu React?

Je suis curieux de savoir ce que le bon Écoulement de l'annotation est pour les deux render méthodes de Réagir classes, simple et returns dans apatrides fonctions:

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

En définissant le type de retour intentionnellement erronée (un certain 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, modifiant le code de ce qui semble satisfaire Flux:

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

Je me demande si c'est exact, et si oui, où cela est-il documenté?

source d'informationauteur ffxsam

  1. 25

    Vous n'avez pas besoin pour annoter la méthode render, le Débit devrait être en mesure de déduire le type de sortie, car il sait ce qu'JSX desugars.

    Flux intégré à Réagir interfaceoù tout ça est bien défini:

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

    Et puis

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

    Donc, si vous voulez formuler explicitement le type de retour d'une méthode de rendu, vous pouvez utiliser cette signature. Eh bien, peut-être sans un point d'interrogation à savoir si vous n'êtes pas retourner null. Vous ne savez pas si il n'y a aucun effet à l'omission de <any>.

  2. 2

    Selon Le flux de la documentation: Réagir: Type de Référencele type correct est Réagir.Nœud:

    import * as React from 'react';

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

    Cela représente un nœud qui peut être rendu dans un Réagir application. React.Node peut être indéfini, null, un booléen, un nombre, une chaîne, un Réagir élément, ou un tableau d'un de ces types de façon récursive.

    Si vous avez besoin d'un type de retour pour votre composant render() méthodes ou vous avez besoin d'un type générique pour enfants prop, alors vous devriez utiliser React.Node.

    Cependant, les exemples de la documentation en général de ne pas écrire le type de render() explicitement. Ils seulement écrire React.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>;
  }
}

    C'est parce que l'extension de React.Component indique automatiquement le Flux de ce que l' render() méthode doit renvoyer.