Executando verificação de segurança...
5
CarlosZiegler
1 min de leitura ·

React: Criando componente polimórfico

Conceito

Um componente polimórfico é um padrão React popular. O padrão permite especificar qual tag HTML usar para renderizar seu componente. Normalmente usamos a prop "as" para sinalizarmos qual tag sera utilizada.

Implementação

export const Link = ({ children, as, ...props }) => {
  const Component = as || "a"
  return <Component {...props}>{children}</Component>
}

Aqui nosso componente sera um Anchor por default, caso nao seja passado nenhuma tag pela props "as".

Utilização

import { Link } from "./Link" 

export const App = () => {
  return <>
     <Link as="button" type="submit" >
        Click me :) 
     </Link>
  </>
}

Nosso Link renderizará como um botão e aceitará as mesmas props que um botao aceita.

Cuidados

A flexibilidade do componente polimórfico também facilita o uso indevido, neste caso especifico podemos gerar um erro caso seja passado uma propriedade que nao exista no elemento. como por exemplo:

import { Link } from "./Link" 

export const App = () => {
  return <>
     <Link as="button" href="http://mylink.com" >
        Click me :( 
     </Link>
  </>
}

Melhor maneira de evitar esses error é usando Typescript, mais sobre isso nesse link:
https://isamatov.com/polymorphic-components-react-typescript/

Creditos: Iskander Samatov

Carregando publicação patrocinada...
1
filipedeschamps

Ah que massa! Eu vi que a propriedade as pode ser usada no Primer React, mas não sabia que a implementação era tão simples.

Em paralelo, uma dúvida simples de React: vi a utilização do fragment <>...</> no return e apesar de entender a funcionalidade dele, me peguei perguntando porque não utilizar o (...), dado que só há um componente filho? É uma decisão "estética" nesse caso? Por exemplo:

 export const App = () => {
      return (
         <Link as="button" type="submit" >
            Click me :) 
         </Link>
      )
 }
2
1
filipedeschamps

Ahh show! Em paralelo, eu editei a sua publicação para colocar o código dentro de um bloco de código com a linguagem js. Peço que edite o seu post e veja como eu fiz 👍

2