はJSXタグ

Question

ためのミスタイプが私は

class Foo extends React.Component<{}> {} 
function Bar(props: {}) {} 

(<Foo />: React.Element<typeof Foo>); // OK 
(<Bar />: React.Element<typeof Bar>); // OK 
(<Foo />: React.Element<typeof Bar>); // Error: Foo is not Bar 

（React typeReferenceから）私のコンポーネントにflowtype注釈のこのスタイルを追加しようとしている、JSXに型注釈を追加する私の試み：

import React, { Component } from 'react' 
import type { Node, Element } from 'react' 

class AlertModalComponent extends Component<iAlertModal, State> { 
    render(): Node { 
    return (
     <View style={alertModalStyle.container}> 
     (<PresentationalModal 
      style={{ backgroundColor: 'transparent' }} 
      isOpen={this.props.isOpen} 
      title={this.props.title} 
      message={this.props.message} 
      updateAlertModalHeight={this.props.updateAlertModalHeight} 
      viewHeight={this.props.viewHeight} 
      hasYesNo={this.props.hasYesNo} 
      yesClicked={this.props.yesClicked} 
      updateAlertModalIsOpen={this.props.updateAlertModalIsOpen} 
     />: Element<typeof PresentationalModal>) 
     </View> 
    ) 
    } 
} 

// $FlowFixMe 
export default connect(mapStateToProps, mapDispatchToProps)(AlertModalComponent) 

AlertModalComponent.contextTypes = { 
    store: PropTypes.object 
} 

const PresentationalModal: Function = ({ 
    isOpen, 
    title,... 
}: AlertModal) => { 
    console.log('presentational modal yes no') 
    return (
    <Modal style={alertModalStyle.modal} isVisible={isOpen}> 
... 

エラー：

Expected corresponding JSX closing tag for <typeof>

それは<typeof>はJSXタグであると考えています。このエラーの解決策は何ですか？

Answer 1

jsxの途中にフロータイプの注釈を追加することはできません。

render(): Node { 
    const presentationalModel: Element<typeof PresentationalModal> = (
    <PresentationalModal 
     style={{ backgroundColor: 'transparent' }} 
     isOpen={this.props.isOpen} 
     title={this.props.title} 
     message={this.props.message} 
     updateAlertModalHeight={this.props.updateAlertModalHeight} 
     viewHeight={this.props.viewHeight} 
     hasYesNo={this.props.hasYesNo} 
     yesClicked={this.props.yesClicked} 
     updateAlertModalIsOpen={this.props.updateAlertModalIsOpen} 
    /> 
) 
    return (
    <View style={alertModalStyle.container}> 
     {presentationalModal} 
    </View> 
) 
} 

これを明示的に入力したい理由はありますか？この型定義を追加しても、コードはより安全になります。フローはすでに<PresentationModal ... />がPresentationModalのタイプであることを知っています。それは混乱を追加しているようだ。