javascript - tag - react js change title

Tipo de flujo adecuado para el método de reacción React?

Question

Tengo curiosidad por saber cuál es la anotación de flujo adecuada para los métodos de render en las clases React y los return simples en funciones sin estado:

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

Al establecer el tipo de retorno intencionalmente incorrecto (a un número), recibí este error:

  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

Entonces, cambiar el código a esto parece satisfacer a Flow:

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

Me pregunto si esto es correcto y, de ser así, ¿dónde se documenta esto?

Answer 1

De acuerdo con la documentación de Flow: React: Type Reference , el tipo correcto es React.Node :

import * as React from ''react'';

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

Esto representa cualquier nodo que se pueda representar en una aplicación React. React.Node puede ser indefinido, nulo, booleano, un número, una cadena, un elemento React o una matriz de cualquiera de esos tipos recursivamente.

Si necesita un tipo de devolución para sus métodos de componente de render() o necesita un tipo genérico para una propiedad React.Node debe utilizar React.Node .

Sin embargo, los ejemplos en la documentación generalmente no escriben explícitamente el tipo de render() . Solo escriben React.Component y el tipo de accesorios, como este:

import * as React from ''react'';

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

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

Esto se debe a que la extensión de React.Component le dice automáticamente a Flow lo render() debe devolver el método render() .

Answer 2

No es necesario anotar el método de renderización, Flow debería poder inferir el tipo de salida porque sabe a qué se dedica JSX.

Flow tiene una interface React incorporada, donde se define todo esto:

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

Y entonces

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

Entonces, si desea proporcionar un tipo de retorno explícito de un método de representación, puede usar esa firma. Bueno, tal vez sin un signo de interrogación si sabes que no estás volviendo nulo. No estoy seguro de si hay algún efecto en omitir <any> .