Tipo di flusso corretto per il metodo di rendering React?

Question

Sono curioso quello che l'annotazione di portata adeguata è per entrambi i metodi in render Reagire classi e semplici return s in funzioni senza stato:

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

Impostando il tipo di ritorno intenzionalmente errato (ad un numero), ho avuto questo errore:

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 

Quindi, cambiare il codice per questo sembra soddisfare flusso:

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

Mi chiedo se questo è corretto, e se sì, dove è documentato?

Answer 1

Non c'è bisogno per annotare il metodo render, flusso deve essere in grado di dedurre il tipo di uscita, perché sa che cosa JSX desugars a.

Flow ha un built-in React interface, dove tutta questa roba è definito:

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

E poi

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

Quindi, se si vuole fornire un tipo di ritorno esplicito di un metodo render , puoi usare quella firma. Beh, forse senza un punto interrogativo se sai che non stai restituendo nulla. Non sono sicuro se c'è qualche effetto nell'omettere <any>.

Answer 2

Secondo Flow documentation: React: Type Reference, il tipo corretto è React.Node:

import * as React from 'react'; 

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

This represents any node that can be rendered in a React application. React.Node can be undefined, null, a boolean, a number, a string, a React element, or an array of any of those types recursively.

If you need a return type for your component render() methods or you need a generic type for a children prop then you should use React.Node .

Tuttavia, gli esempi nella documentazione generalmente non scrivere il tipo di render() esplicitamente. Sono only write outReact.Component e il tipo di oggetti di scena. Suppongo che questo sia dovuto al fatto che l'estensione di React.Component indica automaticamente a Flow cosa deve restituire il metodo render().

import * as React from 'react'; 

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

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