React Academy · Aula

Fundamentos de props.children

Passe JSX como children, renderize um ou vários children e faça a renderização condicional de children.

Fundamentos de props.children é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você aprenderá a passar JSX como filhos, renderizar um ou vários filhos e renderizar filhos condicionalmente em componentes React.

A propriedade children

Qualquer JSX colocado entre as tags de abertura e fechamento de um componente fica automaticamente disponível como `props.children`. É assim que você cria componentes de estrutura ou de layout.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage
<Card><p>Hello world</p></Card>

Filho único e vários filhos

Quando você passa um único filho, `children` é um elemento React. Quando passa vários filhos, `children` é um vetor. O comportamento muda de acordo com a quantidade de filhos passados.

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

Renderizando filhos diretamente

O uso mais simples dos filhos é renderizá-los diretamente dentro do JSX. O componente pai controla o layout e a estilização; o consumidor controla o conteúdo.

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

Renderização condicional de filhos

Verifique se children foi passado antes de renderizá-lo. Um componente pode fornecer um conteúdo alternativo quando nenhum filho é fornecido.

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

Filhos como propriedade de renderização

Os filhos também podem ser uma **função** (o padrão de propriedade de renderização). O pai a chama com dados, e o consumidor controla a renderização. Esse é um padrão mais antigo — atualmente, ganchos personalizados costumam substituí-lo.

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

Passando filhos como propriedade

Os filhos não precisam usar o espaço especial `{children}`. Você pode passar JSX por meio de qualquer nome de propriedade. Essa é a base das áreas nomeadas.

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

Filhos padrão

Você pode fornecer filhos padrão usando a sintaxe de parâmetros padrão do JavaScript na desestruturação. Se o pai não passar nada, o conteúdo padrão será exibido.

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

Fragmentos e vários filhos

Para retornar vários elementos sem um div de contêiner, use `React.Fragment` ou a forma abreviada `<>...`. Essa é uma solução limpa para componentes de layout em que um nó DOM extra quebraria o CSS.

function Row({ children }) {
  return <>{children}</>;
}

TypeScript: tipando filhos

No TypeScript, use `React.ReactNode` para tipar os filhos — ele aceita elementos, strings, números, vetores, null e undefined.

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

Verificação rápida

Quando você passa vários elementos JSX entre as tags de um componente, qual é o tipo de props.children?

Recapitulação

props.children contém qualquer JSX passado entre as tags. Filhos únicos são elementos; vários filhos são um vetor. Use verificações condicionais para filhos opcionais e propriedades nomeadas para áreas nomeadas.

A seguir

Próxima lição: **Utilitários de React.Children** — você usará React.Children.map, count e toArray para manipular filhos com segurança, independentemente do tipo ou da quantidade.

Perguntas Frequentes

A aula “Fundamentos de props.children” é grátis?

Sim — o texto completo de “Fundamentos de props.children” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Fundamentos de props.children”?

Passe JSX como children, renderize um ou vários children e faça a renderização condicional de children. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Fundamentos de props.children”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Fundamentos de props.children
Utilitários React.Children
Slots nomeados por meio de props de objeto
Clonagem e injeção de props com cloneElement

← Voltar para React Academy