如何在 React.memo 中使用帶有泛型的 Props

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 高階函數類型推斷：

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>) => ... */}
  </>
)

操場

Answer 2

我通過將其保留為函數來解決它，將函數重命名為TableComponent並執行以下操作：

export const Table = memo(TableComponent) as typeof TableComponent

編輯，這個也有效：

const typedMemo: <T>(c: T) => T = React.memo
export const Table = typedMemo(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>) {

})

或者如果您需要默認導出：

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

})

編輯：您可以檢查這是否適用於以下代碼：

type MyProps<T> = {someField: T};
const MyComponent = React.memo(function <T>({someField}: MyProps<T>) {
  return <div>{someField}</div>
});

<MyComponent someField={222} />;
<MyComponent someField={'MYSTRING'} />;

const element = React.createElement(MyComponent, {someField: 22});

element類型是

React.FunctionComponentElement<{someField: number}>