reactjs - 等效于 React.memo 的 Typescript 泛型类

Question

有没有办法在 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> />

Answer 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;

Answer 2

您可以编写自己的包装器以不使用 type assertion(as) ：

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

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

export const GenericMemoComponent = genericMemo(GenericComponent)