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

Props Passando props

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

Props Passando props

Props são os dados que um componente pai entrega a um filho, e elas se comportam como argumentos de função: somente leitura. Um filho recebe texto, números, objetos ou até componentes por meio das props e renderiza conteúdos diferentes conforme eles, o que faz das props a base do fluxo de dados do React. Como os dados só viajam para baixo, a árvore fica previsível e toda atualização tem uma origem rastreável.

GrupoRenderização e Estado
TipoPadrão
DesdePrimeiras 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 Badge({ text, color }) {  // Desestruture as props
  return <span style={{ color }}>{text}</span>
}

<Badge text="New" color="red" />     // O pai passa os dados

⚙️ Parâmetros

propsO objeto com todos os atributos passados pelo pai; normalmente você desestrutura apenas os campos de que precisa no parâmetro da função.

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：

Uma badge colorida mostra "Current level: Beginner" com três botões abaixo; clicar em "Advanced" ou "Master" muda o texto e a cor da badge — o pai passou dados novos por props.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso As props são somente leitura: modificá-las dentro de um filho quebra o fluxo unidirecional de dados, então peça um callback e deixe o pai atualizar o estado dele.
💡 Dica Prefira desestruturar na assinatura ({ name, size }); fica mais legível do que props.name em todo lugar e deixa as dependências de um componente evidentes à primeira vista.
ℹ️ Informação As props podem carregar qualquer valor: strings, números, arrays, funções, JSX e até outro componente.
props-children props-default props-callbacks component
Mais casos em breve.

📚 Tutoriais Relacionados

Componentes de função e props
Lição 3: passar, desestruturar e a regra de somente leitura das props.

❓ Perguntas Frequentes

P As props podem ser modificadas?
R Não. As props pertencem ao pai e o filho só pode lê-las; para mudar o que é exibido, passe uma prop de callback que permita ao pai atualizar o próprio estado.
P Qual a diferença entre props e estado?
R As props são passadas de fora e são somente leitura, enquanto o estado é mantido pelo próprio componente e pode ser atualizado por ele; a mudança em qualquer um dos dois dispara uma re-renderização.
P Como um filho devolve dados ao pai?
R O pai passa uma função como prop (por exemplo onChange); o filho a chama no momento certo com os dados, e o pai decide como atualizar.
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%