如何在React.memo中使用带有泛型的属性
如何在React.memo中使用带有泛型的属性
提问于 2020-02-25 02:17:22
我正在尝试将以下代码转换为使用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>>(
~~~~~~~~回答 4
Stack Overflow用户
回答已采纳
发布于 2020-02-25 07:03:40
使用当前的React类型声明，不可能在React.memo之外创建泛型组件。没有类型断言的解决方案是添加额外的memo函数重载以利用TS3.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>) => ... */}
</>
)Stack Overflow用户
发布于 2020-02-25 03:04:25
我通过将其保留为一个函数来解决它，将该函数重命名为TableComponent并执行以下操作：
export const Table = memo(TableComponent) as typeof TableComponent编辑，这也行得通：
const typedMemo: <T>(c: T) => T = React.memo
export const Table = typedMemo(TableComponent)Stack Overflow用户
发布于 2020-02-25 03:00:57
您不需要将组件作为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>) => {
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60386614
复制
相似问题
使用泛型方法时如何在泛型方法中设置泛型属性属性？
带有任何泛型参数的泛型属性列表
使用带有泛型对象属性的TableView
React.memo的Typescript泛型类等效类
使用变量，如类型/泛型方法
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
