reactjs - 如何使用流为 HoC 编写类型定义

Question

我正在尝试为 HoC 编写一个流类型，它将返回一个组件并向它添加一个 prop isVisible

type VisibleProps = {isVisible: boolean}

const VisibleComp = <P, S>(Component: Class<React.Component<void, P, S>>)
  : Class<React.Component<void, P&VisibleProps, S> => 
  class WrappedComponent extends React.Component<void, P&VisibleProps, S> {
      render() {
          return <Component {...this.props} isVisible={true} />
      }
  }

我尝试了几件事但没有成功:(

Answer 1

挖掘流程问题，我发现这个问题解决了我的问题 https://github.com/facebook/flow/issues/3241

希望能帮助到你。

// @flow
import React from 'react';

type Visible = {isVisible: boolean}
type WrappedProps<P,Visible> = P & Visible  

const injectVisible = <P: Object>(
  Component: Class<React.Component<*, WrappedProps<P, Visible>, *>>
) => class VisibleHoC extends React.Component<*, P, Visible> {
      state: Visible
      render() {
          return <Component {...this.props} isVisible={true} />
      }
  }

class Component extends React.Component {
  props: Visible
  render() {
    return <div> {this.props.isVisible ? 'visible' : 'hidden'}</div>
  }
}

const VisibleComponent = injectVisible(Component)