如何使用流键入更高阶的组件

Question

我有以下HOC：

export default (keys: Array<string>) =>
  (WrappedComponent: React.Component<*, *, *>) => (props: Object): React.Element<*> => {
    if (hasNotYetLoadedProps(keys, props)) {
      return (
        <div
          style={{
            textAlign: 'center',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <div>Loading</div>
        </div>
      )
    }
    return <WrappedComponent {... props} />
  }

要么渲染原始组件，要么渲染加载指示器。使用实际的流类型声明我收到此错误：

React element `WrappedComponent`. Expected React component instead of React$Component 

在最后一行。输入组件的正确类型是什么？

Answer 1

类型需要ReactClass<any>

export default (keys: Array<string>) =>
  (WrappedComponent: ReactClass<any>) => (props: Object): React.Element<*> => {
    if (hasNotYetLoadedProps(keys, props)) {
      return (
        <div
          style={{
            textAlign: 'center',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <div>Loading</div>
        </div>
      )
    }
    return <WrappedComponent {... props} />
  }