Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

TIPAGEM BUTTON CHILDREN

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

me surgiu uma duvida que é: Antes ao passar children em um button poderiamos passer icones como filho e imgs tbm, so que agora com a tipagem se passarmos o valor de ReactElemtent | string, ele nao aceitaria! como que eu faço neste caso para ter um icone e uma imagem ao botao?

3 respostas
solução!

Olá Rafael, tudo bem?

Entendo sua dúvida. De fato, com a tipagem em TypeScript, o valor de children em um botão deve ser do tipo ReactElement ou string, o que pode limitar a possibilidade de passar ícones ou imagens como filhos.

Uma solução para esse caso seria utilizar componentes que encapsulem esses elementos. Por exemplo, você pode criar um componente de ícone que recebe a imagem ou o ícone como propriedade e retorna o elemento correspondente. Em seguida, basta passar o componente de ícone como filho do botão.

Veja um exemplo:

import React from 'react';

interface IconProps {
  src: string;
}

const Icon: React.FC<IconProps> = ({ src }) => {
  return <img src={src} alt="Ícone" />;
};

const MeuComponente: React.FC = () => {
  return (
    <button>
      <Icon src="icone.png" />
      <span>Texto do botão</span>
    </button>
  );
};

Dessa forma, você pode passar o componente de ícone como filho do botão e ainda manter a tipagem correta.

Espero ter ajudado e bons estudos!

Muito Obrigado Renan, valeu mesmo cara!

Por nada, eu fico feliz em ajudar. Valeu :)