English 中文 العربية 日本語 Português

Composition Composição de Componentes

Última atualização: 2026-11-03

Composition Composição de Componentes

O React recomenda composição em vez de herança para reutilizar componentes: o pai passa JSX como children ou como uma prop personalizada, um contêiner genérico como Card, Layout ou Modal decide onde esse JSX vai, e quem chama decide o que ele contém. Por isso children é o mecanismo de slot mais natural de todos. O contêiner permanece ignorante do conteúdo que renderiza, então o mesmo quadro pode hospedar um formulário, um gráfico ou um parágrafo sem nunca saber qual deles está mostrando.

GrupoPadrões de Componentes
TipoPadrão

ℹ️ 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, footer }) {
  return (
    <div className="card">
      <div>{children}</div>   {/* the main content slot */}
      <div>{footer}</div>     {/* a custom slot prop */}
    </div>
  )
}

// usage: <Card footer={<small>2026</small>}><p>Body text</p></Card>

Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Dois painéis de cartão com título, cujo conteúdo é fornecido por quem chama por meio de children — Panel só possui a moldura e nunca se importa com a estrutura interna.
▶ Experimente

💡 Pontos-chave

💡 Dica props.children é o slot implícito; quando você precisar de vários slots, passe JSX por meio de props nomeadas, como header e footer.
ℹ️ Informação A composição mantém um contêiner independente do seu conteúdo: Panel não sabe nem se importa com o que entra, então os dois são desacoplados por natureza.
⚠️ Aviso Não use cloneElement nem herança de classe para injetar estrutura — na grande maioria dos casos children mais props é mais claro e fácil de controlar.
component props-children render-props conditional-rendering
Mais casos em breve.

📚 Tutoriais Relacionados

Composição de Componentes
Lição 8: o slot children, slots nomeados e layouts composicionais.

❓ Perguntas Frequentes

P Qual é a diferença entre children e uma prop comum?
R Children é o conteúdo entre as tags de abertura e fechamento, o que parece mais natural na sintaxe JSX; por baixo dos panos ainda é uma prop e pode ser misturada livremente com props nomeadas.
P Como implemento vários slots?
R Defina várias props do tipo JSX — <Modal header={…} footer={…}>{body}</Modal> — e renderize cada uma delas dentro do componente.
P Por que escolher composição em vez de herança?
R A posição oficial do React: a herança acopla um componente à implementação de sua classe pai, enquanto a composição passa JSX por meio de props, o que é flexível, previsível e não precisa de sintaxe de classe.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%