Question

背景：

Flow关于键入高阶组件的文档描述了props injection和supporting defaultProps的方式，但是建议的代码示例使用了不同的方法，并且没有将两者组合的示例。 / p>
自0.72版以来，Flow已弃用推断类型*（星号）。

问题

我正在尝试合并Flow的文档中的配方，并键入一个函数，该函数将redux存储中的某个属性注入到提供的组件中。这是我的代码：

import React, { Component, type ComponentType, type ElementConfig } from 'react';
import { connect } from 'react-redux';

import type { State } from 'client/types/redux';

export type InjectedProps = {
  xs: string[]
}

export default function injector<Props, Com: ComponentType<Props>>(
  DecoratedComponent: Com
) : ComponentType<$Diff<ElementConfig<Com>, InjectedProps>> {

  class Decorator extends Component<ElementConfig<Com>> {

    render() {
      return (
        <DecoratedComponent
          {...this.props} // the props will now contain xs from redux
        />
      );
    }

  }

  return connect((state: State)  => ({
    xs: state.xs
  }))(Decorator);
}

以下是此代码的简化版本（不包含redux），它提供的错误与上面Try Flow中的代码相同。

请注意*如果ComponentType类型用于*。{/ p>

请您建议如何在不使用已弃用的void checkHitArrowWithBubbles() { for (int j = 0; j< bubblesArray.size(); j++) { for (int i = 0; i< arrowArray.size(); i++) { if (bubblesArray.get(j).checkHitArrow(arrowArray.get(i))) { println("BUBBLE IS HIT"); arrowArray.remove(i); timesHit+=1; numberOfBubble*=2; scorePlayer+=5; bubbleWidth = bubble.width/2; bubbleHeight = bubble.height/2; bubble.resize(bubbleWidth, bubbleHeight); for ( int k = 0; k < numberOfBubble; k++) { bubblesArray.add(new Bubbles(bubblesArray.get(j).getPosXBubbles(), bubblesArray.get(j).getPosYBubbles(), bubble)); } bubblesArray.remove(j); } else { bubbleWidth = 100 ; bubbleHeight = 100 ; bubble.resize(bubbleWidth, bubbleHeight); numberOfBubble=1; } } } }类型的情况下正确键入此高阶函数

Answer 1

您的简化示例有fixed version。

import React, { Component, type ComponentType, type ElementConfig } from 'react';

type InjectedProps = {
  xs: string[]
}
// notice that InProps must contain an xs property that must be an array of strings
export default function injector<InProps: { xs: string[] }, Com: ComponentType<InProps>, OutProps: $Diff<ElementConfig<Com>, InjectedProps>>(
  DecoratedComponent: Com
) : ComponentType<OutProps> {

  return function decorator(props: OutProps) { // notice OutProps here
      const xs = ['foo']
      return (
        <DecoratedComponent
          {...props}
          xs={xs}
        />
      );
  }
}

流式键入道具注入的高阶组件（同时保留defaultProps的可选性）

1 个答案: