JSX에 유형 약어 실수를 추가하기 JSX 태그

Question

내가 (React typeReference에서) 내 구성 요소에 flowtype 주석의 스타일을 추가하기 위해 노력하고있어의 형태

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 

내 시도 :

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> 
) 
} 

명시 적으로 입력하려는 이유가 있습니까? 이 유형 정의를 추가해도 코드가 더 안전 해지지는 않습니다. flow는 이미 <PresentationModal ... />이 PresentationModal 유형임을 알고 있습니다. 그것이 혼란을 더하는 것처럼 보입니다.