リアクションレンダリング方式の適切なフロータイプですか？

Question

私は適切な流れアノテーションはステートレスな機能のクラスを反応させるのでは両方のrender方法、および簡単なreturn秒何のためにあるのか興味がある：（数を）意図的に間違った戻り値の型を設定することにより

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 

、これにコードを変更するとフローを満たすように見える：

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

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

Answer 1

レンダリングメソッドに注釈を付ける必要があります。フローは、JSXが何をdesugarsするかを知っているので、出力タイプを推測できる必要があります。

フローは内蔵していますが、すべてこのようなものが定義されているinterfaceを、リアクト：

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

そして

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

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

Answer 2

Flow documentation: React: Type Referenceによると、正しい型は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 .

しかし、マニュアルの例は、一般的に明示的render()の種類を記述しないでください。それらはonly write outReact.Componentと小道具の種類です。私はこれを推測しているのは、React.Componentを拡張すると、自動的にFlowにrender()メソッドが返すべきものが通知されるからです。 ommitting

import * as React from 'react'; 

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

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