等效于 React.memo 的 Typescript 泛型类答案

【问题标题】：Typescript generic class equivalent for React.memo等效于 React.memo 的 Typescript 泛型类
【发布时间】：2019-08-13 12:05:02
【问题描述】：

有没有办法在 React.memo 中设置新的泛型？

例如，对于类组件，我可以使用

// set generic
class GenericClass<G extends string | number> extends PureComponent {}

// and use like this
<GenericClass<number> />

在下面的场景中，我想让类型 G 泛型。

type G = string;
const MemoComponent = memo<{ value: G; onValueChange: (newValue: G) => void }>(
  ({ value, onValueChange }) => {
    return (
      <select
        onClick={() => {
          // do calculation
          onValueChange(value);
        }}
      >
        Button
      </button>
    );
  }
);

我想知道有没有办法在 React.memo 中设置泛型？例如，如下所示

const MemoComponent = <G extends string | number | object>React.memo<{value: G}>(({value}) => component)

// and use like this
<MemoComponent<number> />

【问题讨论】：

你能添加更多代码吗？展示你尝试过的东西？您对 memoized 组件的最后期望是什么？
相关：stackoverflow.com/questions/60386614/…

标签： reactjs typescript generics memo

【解决方案1】：

我遇到了同样的问题并这样解决了。

    interface ISomeComponentWithGenericsProps<T> { value: T; } 

    function SomeComponentWithGenerics<T>(props: ISomeComponentWithGenericsProps<T>) {
      return <span>{props.value}</span>;
    }

    export default React.memo(SomeComponentWithGenerics) as typeof SomeComponentWithGenerics;

【讨论】：

这是可能的。因为useMemo 和React.memo 有不同的用例和行为。尝试并工作。谢谢！
这救了我的命。到目前为止，我见过的最简单的解决方案谢谢。 FU 打字稿。
感谢您的简单回答！尽管您无法看到它是一个 ExoticComponent，但这似乎并不重要，因为在实际实现中接口应该是相同的。
感谢您的回答！
谢谢！添加as typeof XXX 就像一个魅力。

【解决方案2】：

您可以编写自己的包装器以不使用类型断言（as）：

const genericMemo: <T>(component: T) => T = memo

function GenericComponent<Value>({props: PropsWithGeneric<Value>}) {
  return <div />
}

export const GenericMemoComponent = genericMemo(GenericComponent)

【讨论】：

完美答案，这对我有帮助 :)