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>

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.