Neste artigo você aprenderá sobre o tipo da propriedade children, uma prop muito importante da lib React JS!

Fala programador(a), beleza? Bora aprender mais sobre React!

React e TypeScript são duas tecnologias poderosas que, quando combinadas, podem ajudar a desenvolver aplicações web robustas, escaláveis e manuteníveis.

Neste artigo, vamos explorar o uso da propriedade children no React, com um foco específico em como o TypeScript nos ajuda a garantir a segurança dos tipos.

Vamos começar!

O que é a propriedade children no React?

O children é uma propriedade especial que o React usa para passar elementos de componentes de pais para filhos.

Esta propriedade é útil quando se quer encapsular partes reutilizáveis do código em componentes e passar JSX personalizado para esses componentes.

Vejamos um exemplo simples:

function CustomCard({ children }: { children: React.ReactNode }) {
  return <div className="custom-card">{children}</div>;
}

// Uso
<CustomCard>
  <h2>Título</h2>
  <p>Algum texto...</p>
</CustomCard>

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

No exemplo acima, CustomCard é um componente que aceita children como prop. A propriedade children é então renderizada dentro de uma div.

Propriedade children e TypeScript

Quando usamos TypeScript com React, precisamos definir os tipos de todas as props dos componentes para aproveitar a checagem de tipos do TypeScript. A propriedade children não é uma exceção.

O tipo mais comum para children no TypeScript é ReactNode. ReactNode é um tipo abrangente que inclui ReactChild, ReactFragment, ReactPortal, boolean, null, undefined e string.

Então, quando declaramos children como ReactNode, estamos dizendo que ele pode ser qualquer coisa que o React possa renderizar.

type CustomCardProps = {
  children: React.ReactNode;
};

function CustomCard({ children }: CustomCardProps) {
  // ...
}

Uso de children com Componentes Funcionais

No React, temos dois tipos principais de componentes – Componentes de Classes e Componentes Funcionais.

Com o advento dos Hooks no React 16.8, a maioria dos desenvolvedores prefere usar componentes funcionais pela simplicidade e facilidade de uso.

Vejamos como usar a propriedade children com componentes funcionais.

type CustomCardProps = {
  children: React.ReactNode;
};

const CustomCard: React.FC<CustomCardProps> = ({ children }) => {
  return <div className="custom-card">{children}</div>;
};

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre o tipo da proprieAdade children!

A propriedade children no React é uma ferramenta poderosa e versátil, e com TypeScript podemos garantir que estamos usando-a de maneira segura e eficaz.

Isso permite criar uma API limpa e fácil de entender para nossos componentes, tornando nosso código mais fácil de ler, escrever e manter.

Portanto, se você está desenvolvendo uma aplicação em React com TypeScript, entender a propriedade children e como tipificá-la corretamente é essencial.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

ReactNode, ReactElement e JSX.Element: qual usar?

Aqui mora a dúvida que quase todo mundo tem ao tipar children

Parece tudo a mesma coisa, mas não é

O ReactNode é o mais abrangente, ele aceita praticamente tudo que o React consegue renderizar: texto, número, um elemento, uma lista deles, e até null

É por isso que ele é a escolha padrão pra children, você não sabe o que o pai vai jogar dentro do componente, então abraça tudo

Já o ReactElement é mais restrito, ele espera um elemento React de verdade, tipo o retorno de um JSX

Se você tenta passar um texto puro como children tipado com ReactElement, o TypeScript reclama

E o JSX.Element? Na prática ele é bem próximo do ReactElement, é o tipo que o próprio JSX devolve quando você escreve uma tag

Regra de bolso: pra children, use ReactNode e siga a vida

Só desça pro ReactElement quando você REALMENTE precisa forçar que só entre um elemento ali, e não texto solto

Como deixar o children opcional?

Às vezes o componente funciona com ou sem filho, tipo um card que pode vir vazio

Nesse caso você não quer obrigar o children, e o TypeScript te obriga por padrão quando o tipo é ReactNode

A saída é marcar a prop como opcional com o sinal de interrogação

type CustomCardProps = { children?: React.ReactNode; };

Com o children? assim, o TypeScript passa a aceitar o componente sendo usado sem nenhum filho dentro

Bora ver na prática? Os dois usos abaixo ficam válidos:

<CustomCard />

<CustomCard> <p>Agora com conteúdo</p> </CustomCard>

Tome cuidado pra não deixar opcional por engano num componente que SEMPRE precisa de filho, senão o erro só aparece em tempo de execução, quando já era

Atalho: o utilitário PropsWithChildren

Se você conhece aquela preguiça boa de não repetir código, esse aqui vai te agradar

Em vez de escrever o children na mão em todo componente, o React já traz um utilitário de tipo que faz isso por você

Ele se chama PropsWithChildren e junta as suas props com o children já tipado como ReactNode

type CustomCardProps = { titulo: string; };

function CustomCard({ titulo, children }: React.PropsWithChildren<CustomCardProps>) { return ( <div className="custom-card"> <h2>{titulo}</h2> {children} </div> ); }

Repara que eu nem precisei declarar o children dentro de CustomCardProps, o PropsWithChildren cuidou disso

É menos código pra manter e o mesmo resultado, bem massa pra quem tem vários componentes que recebem filhos

Perguntas frequentes sobre o tipo de children

Qual é o tipo do children no React com TypeScript?

O tipo mais usado é React.ReactNode, porque ele cobre tudo que o React consegue renderizar dentro do componente

Preciso sempre declarar o children nas props?

Se o componente vai receber filhos e você usa TypeScript, sim, senão o TypeScript acusa que a prop children não existe

A alternativa é usar o PropsWithChildren, que já inclui o children pra você

Posso tipar children como string ou number?

Pode, quando o componente só aceita texto ou número ali dentro, aí você restringe o tipo de propósito

Mas pra caso geral o ReactNode é mais seguro, ele já abrange string e number junto com o resto