1

Estou tentando criar um componente que ele vai aceitar um tipo genérico dentro das props. Estou tentando fazer da seguinte forma:

interface Props<T> {
  items: T[];
}

const componente: React.FC<Props<T>> = (props) => {...}

Entretanto, dessa forma ele retorna um erro dizendo que T não foi definido. Qual seria a forma correta de criar um componente com props genéricas?

1

1 Resposta 1

2

Basta utilizar como um genérico de funções normal, o TypeScript entenderá que se trata de um componente React quando você o chamar.

Assim:

interface Props<T> {
  items: T[];
}

//                  ↓↓↓
function MyComponent<T>(props: Props<T>) {
  return (
    <>{JSON.stringify(props.items, null, 2)}</>
  );
}

Note que você não poderá utilizar uma arrow function utilizando o tipo React.FC, já que o genérico teria que vir depois. O tipo React.FC adiciona a propriedade children de modo implícito. Desse modo, se o seu componente tiver que usar essa prop, basta modificar a interface Props:

interface Props<T> {
  items: T[];
  children: React.ReactNode;
}

Para definir o genérico no componente, utilize esta notação:

<MyComponent<string> items={['A', 'B', 'C']} />
<MyComponent<number> items={[1, 2, 3]} />

No final, você terá algo como:

import React from 'react';

interface Props<T> {
  items: T[];
}

function MyComponent<T>(props: Props<T>) {
  return (
    <>{JSON.stringify(props.items, null, 2)}</>
  );
}

function MainComponent() {
  return (
    <> 
      <MyComponent<string> items={['A', 'B', 'C']} />
      <MyComponent<number> items={[1, 2, 3]} />
    </>
  );
}

Veja funcionando no TypeScript playground.

4
  • Teria como o MyComponent ser uma arrow function? Commented 11/05/2020 às 15:59
  • 1
    Sim, mas você não poderia usar o tipo React.FC, já que o genérico do componente viria depois do tipo que você passaria para o genérico de React.FC. Commented 11/05/2020 às 16:14
  • @FelipeAvelar, faltou alguma informação na resposta? Commented 11/05/2020 às 21:16
  • Não, não, queria ver se alguém mais respondia antes de aceitar, mas parece que não vai ter mais ninguém :/ Commented 12/05/2020 às 1:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .