2
votes

Comment utiliser des accessoires avec des génériques avec React.memo

React.memo de convertir ce qui suit pour utiliser React.memo :

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

Comme ça (incorrect):

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



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

})

Comment puis-je corriger cette syntaxe? Actuellement, il a cette erreur:

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

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

}

javascript reactjs typescript

0 commentaires

4 Réponses :

1
votes

Vous n'avez pas besoin de passer un composant comme premier paramètre de React.memo ? Je n'ai pas pu le tester, mais j'ai l'impression que c'est le processus de réflexion:

// 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>) => {

})

1 commentaires

Je pense que vous êtes dans la bonne direction, je pense que cela aurait besoin d'être enveloppé dans un style HOC avec cette approche. J'ai réussi à le résoudre avec un casting, mais il existe peut-être une solution plus "correcte"

2
votes

Je l'ai résolu en le conservant en tant que fonction, en renommant la fonction en TableComponent et en faisant:

export const Table = memo(TableComponent) as typeof TableComponent

0 commentaires

4
votes

Avec les déclarations de type React actuelles, il n'est pas possible de créer un composant générique à partir de React.memo . Une solution sans assertions de type consiste à ajouter une surcharge de fonction memo supplémentaire pour tirer parti de l' inférence de type de fonction d'ordre supérieur TS 3.4:

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

Vous pourrez alors rendre le composant Table générique. Assurez-vous simplement de passer une fonction générique à memo :

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

Terrain de jeux

0 commentaires

0
votes

Simple, passez simplement une fonction non fléchée à React.memo :

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

})

0 commentaires