children A prop children
Última atualização: 2026-11-03
children A prop children
children é uma prop especial: tudo o que fica entre as tags de abertura e fechamento de um componente vira props.children automaticamente. Ela permite que um componente envolva conteúdo arbitrário, o que é a base de contêineres genéricos como layouts, modais e cards. Um contêiner, portanto, só precisa decidir como envolver o conteúdo, nunca o que o conteúdo deve ser.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Padrão |
| Desde | Primeiras versões do React |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
function Card({ children }) {
return <div className="card">{children}</div>
}
<Card>Content between the tags is passed to children automatically</Card>⚙️ Parâmetros
| children | O conteúdo entre as tags do componente: strings, JSX, arrays e até mesmo funções acabam nesta prop especial. |
|---|
Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Dois cards azuis com cantos arredondados: o primeiro envolve uma única linha de texto e o segundo um título em negrito, um parágrafo e um botão — o mesmo contêiner Card envolvendo conteúdos bem diferentes.💡 Pontos-chave
💡 Dica children permite que um componente se preocupe com como envolver, e não com o que envolver, que é a ferramenta central por trás da composição ser melhor que a herança.
ℹ️ Informação children pode ser uma string, um elemento, um array ou até uma função (o padrão de render props).
⚠️ Aviso Quando são passados vários filhos, children é um array — nunca presuma que seja um único elemento.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P O que é props.children?
R É o conteúdo entre as tags de abertura e fechamento de um componente. O React o passa automaticamente com o nome children, e ele é a base de componentes de contêiner como layouts, cards e modais.
P Posso sempre tratar children como um array?
R Nem sempre: com um único filho, ele é o próprio elemento, e só com vários filhos é que vira um array. Use os utilitários de React.Children quando precisar de um formato estável.
P Quando uso children e quando uso uma prop nomeada?
R Conteúdo aninhado combina naturalmente com children (modais, layouts), enquanto dados de configuração combinam com props nomeadas (title, color); as duas são frequentemente usadas juntas.
