Generic Components Componentes Genéricos

Última atualização: 2026-11-03

Generic Components Componentes Genéricos

Componentes genéricos deixam o tipo seguir os dados: uma função List<T> renderiza um array de strings com T=string e um array de objetos com T=User. Você escreve uma vez e todo tipo de elemento ganha inferência e dicas completas, que é a técnica central por trás de bibliotecas de UI reutilizáveis e wrappers da camada de dados. A lógica do componente para de se importar com o formato dos itens, então o mesmo código serve qualquer payload que o chamador entregar.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

type ListProps<T> = {
  items: T[]
  renderItem: (item: T) => React.ReactNode   // the caller decides how to render
  keyOf?: (item: T) => string | number
}

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return (
    <ul>
      {items.map((it, i) => (
        <li key={keyOf ? keyOf(it) : i}>{renderItem(it)}</li>
      ))}
    </ul>
  )
}

// T is inferred automatically at the call site:
<List items={['a', 'b']} renderItem={s => s.toUpperCase()} />      // T = string
<List items={users} renderItem={u => u.name} keyOf={u => u.id} />   // T = User

Retorna：Sem valor de retorno; trata-se de um padrão de codificação, não de uma API chamável.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Três listas reutilizam o mesmo componente GenericList para renderizar strings, números e objetos — genéricos desacoplam a lógica do componente do tipo do elemento (demonstração JSX em tempo de execução, os tipos são inferidos na versão TypeScript).

💡 Pontos-chave

🏷️ Mais Dados e Engenharia

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós