Question

我正在尝试将此样式的flowtype注释添加到我的组件中（来自React typeReference）

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

错误：

<typeof>
的预期对应JSX结束标记

它认为<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。似乎它增加了混乱。

向JSX添加类型注释会使JSX标记的类型出错

1 个答案: