Question

我正在尝试将以下内容转换为使用React.memo：

interface Props<TRowData> {
  // props...
}

export function Table<TRowData>({
  propA,
  propB
}: Props<TRowData>) {

}

这样（不正确）：

interface Props<TRowData> {
  // props...
}



export const Table = memo<Props<TRowData>>(
({
  propA,
  propB
}) => {

})

如何纠正此语法？当前出现此错误：

// Cannot find name 'TRowData'.
export const Table = memo<Props<TRowData>>(
                                ~~~~~~~~

Answer 1

使用当前的React类型声明，无法在React.memo之外创建通用组件。没有类型声明的解决方案是添加一个额外的memo函数重载以利用TS 3.4 higher order function type inference：

import React, { memo } from "react"

declare module "react" { // augment React types
  function memo<A, B>(Component: (props: A) => B): (props: A) => ReactElement | null
  // return type is same as ReturnType<ExoticComponent<any>>
}

然后，您将可以使Table组件通用。只要确保将通用函数传递给memo：

interface Props<T> {
  a: T
}

const TableWrapped = <T extends {}>(props: Props<T>) => <div>{props.a}</div>

const Table = memo(TableWrapped)

const App = () => (
  <>
    <Table a="foo" /> {/* (props: Props<string>) => ... */}
    <Table a={3} /> {/* (props: Props<number>) => ... */}
  </>
)

Playground

Answer 2

我通过将其保留为一个函数，将该函数重命名为TableComponent并执行以下操作来解决了该问题：

export const Table = memo(TableComponent) as typeof TableComponent

Answer 3

您是否不需要将组件作为React.memo的第一个参数传递？我无法测试，但我觉得这是思考过程：

// Overall format:
export const Table = memo(MyComponent, MyFunction)

// With empty arrow function:
export const Table = memo(MyComponent, () => {})

// With your code:
export const Table = memo(MyComponent, ({propA, propB}: Props<TRowData>) => {

})

Answer 4

简单，只需将非箭头函数传递给React.memo：

export const Table = React.memo(function<T>(props: Props<T>) {

})

如何在React.memo中将Props与泛型一起使用

4 个答案: