Javascript 如何通过React.memo将道具与泛型结合使用

我正在尝试将以下内容转换为使用

React.memo

：

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

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

}

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

界面道具{
//道具。。。
}
导出函数表({
普罗帕，
道具
}：道具）{
}

类似（不正确）：

界面道具{
//道具。。。
}
导出常数表=备注(
({
普罗帕，
道具
}) => {
})

如何更正此语法？目前它有以下错误：

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

//找不到名称“TRowData”。
导出常数表=备注(
~~~~~~~~

您不需要将组件作为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>) => {

})

//总体格式：
导出常量表=备注（MyComponent，MyFunction）
//具有空箭头功能：
export const Table=memo（MyComponent，（）=>{}）
//使用您的代码：
export const Table=memo（MyComponent，（{propA，propB}:Props）=>{
})

我将其作为一个函数保存，将函数重命名为

TableComponent

并执行以下操作，从而解决了此问题：

export const Table = memo(TableComponent) as typeof TableComponent

编辑，此选项也适用：

const typedMemo: <T>(c: T) => T = React.memo
export const Table = typedMemo(TableComponent)

const typedMemo:（c:T）=>T=React.memo
export const Table=typedMemo（TableComponent）

使用当前的React类型声明，无法从

React.memo

创建通用组件。没有类型断言的解决方案是添加额外的函数重载以利用TS 3.4：

---

简单，只需将非箭头函数传递给

React.memo

：

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

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

}

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

export const Table=React.memo（函数（props:props）{
})

或者，如果需要默认导出：

export default React.memo（函数表（props:props）{
})

编辑： 您可以使用以下代码检查此操作是否有效：

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});

---

我相信你的思路是正确的，我认为使用这种方法需要以一种特殊的风格进行包装。我已经设法通过一些铸造来解决它，但可能有一种更“正确”的解决方案，这将不起作用。React.memo不会传递泛型。用一个示例更新

React.FunctionComponentElement<{someField: number}>