Passando Props para um Componente

Os componentes React usampropspara se comunicar entre si. Todo componente pai pode passar algumas informações para seus componentes filhos, fornecendo-lhes props. As props podem lembrá-lo de atributos HTML, mas você pode passar qualquer valor JavaScript através delas, incluindo objetos, arrays e funções.

Props familiares

Props são as informações que você passa para uma tag JSX. Por exemplo,className,src,alt,width e heightsão algumas das props que você pode passar para uma<img>:

As props que você pode passar para uma tag<img>são predefinidas (o ReactDOM está em conformidade como padrão HTML). Mas você pode passar qualquer props paraseus próprioscomponentes, como<Avatar>, para personalizá-los. Veja como!

Passando props para um componente

Neste código, o componenteProfilenão está passando nenhuma props para seu componente filho,Avatar:

Você pode dar algumas props aoAvatarem duas etapas.

Etapa 1: Passe props para o componente filho

Primeiro, passe algumas props paraAvatar. Por exemplo, vamos passar duas props:person(um objeto) esize(um número):

Agora você pode ler essas props dentro do componenteAvatar.

Etapa 2: Leia as props dentro do componente filho

Você pode ler essas props listando seus nomesperson, sizeseparados por vírgulas dentro de({ e })diretamente apósfunction Avatar. Isso permite que você os use dentro do código doAvatar, como faria com uma variável.

Adicione alguma lógica aoAvatarque use as propsperson e sizepara renderização, e pronto.

Agora você pode configurar oAvatarpara renderizar de várias maneiras diferentes com props diferentes. Tente ajustar os valores!

As props permitem que você pense nos componentes pai e filho de forma independente. Por exemplo, você pode alterar as propsperson ou sizedentro deProfilesem precisar pensar em como oAvataras utiliza. Da mesma forma, você pode alterar como oAvatarusa essas props, sem olhar para oProfile.

Você pode pensar nas props como "botões" que você pode ajustar. Elas desempenham o mesmo papel que os argumentos desempenham para funções—na verdade, propssãoo único argumento do seu componente! As funções de componente React aceitam um único argumento, um objetoprops:

Geralmente você não precisa do objetopropsinteiro, então você o desestrutura em props individuais.

Especificando um valor padrão para uma prop

Se você quiser dar a uma prop um valor padrão para usar como fallback quando nenhum valor for especificado, você pode fazer isso com a desestruturação colocando=e o valor padrão logo após o parâmetro:

Agora, se<Avatar person={...} />for renderizado sem a propsize, o sizeserá definido como100.

O valor padrão só é usado se a propsizeestiver ausente ou se você passarsize={undefined}. Mas se você passarsize={null}ousize={0}, o valor padrãonãoserá usado.

Encaminhando props com a sintaxe de espalhamento JSX

Às vezes, passar props fica muito repetitivo:

Não há nada de errado com código repetitivo—ele pode ser mais legível. Mas às vezes você pode valorizar a concisão. Alguns componentes encaminham todas as suas props para seus filhos, como esteProfilefaz com oAvatar. Como eles não usam nenhuma de suas props diretamente, pode fazer sentido usar uma sintaxe de "espalhamento" mais concisa:

Isso encaminha todas as props doProfilepara oAvatarsem listar cada um de seus nomes.

Use a sintaxe de espalhamento com moderação.Se você estiver usando-a em todos os outros componentes, algo está errado. Muitas vezes, isso indica que você deve dividir seus componentes e passar filhos como JSX. Mais sobre isso a seguir!

Passando JSX como filhos

É comum aninhar tags de navegador integradas:

Às vezes, você vai querer aninhar seus próprios componentes da mesma maneira:

Quando você aninha conteúdo dentro de uma tag JSX, o componente pai receberá esse conteúdo em uma prop chamadachildren. Por exemplo, o componenteCardabaixo receberá uma propchildrendefinida como<Avatar />e a renderizará em uma div wrapper:

Tente substituir o<Avatar>dentro de<Card>por algum texto para ver como o componenteCardpode envolver qualquer conteúdo aninhado. Ele não precisa "saber" o que está sendo renderizado dentro dele. Você verá esse padrão flexível em muitos lugares.

Você pode pensar em um componente com uma propchildrencomo tendo um "buraco" que pode ser "preenchido" por seus componentes pai com JSX arbitrário. Você frequentemente usará a propchildrenpara wrappers visuais: painéis, grades, etc.

Ilustrado porRachel Lee Nabors

Como as props mudam ao longo do tempo

O componenteClockabaixo recebe duas props de seu componente pai:color e time. (O código do componente pai foi omitido porque ele usaestado, no qual não vamos nos aprofundar agora.)

Tente mudar a cor na caixa de seleção abaixo:

Este exemplo ilustra queum componente pode receber props diferentes ao longo do tempo.As props nem sempre são estáticas! Aqui, a proptimemuda a cada segundo, e a propcolormuda quando você seleciona outra cor. As props refletem os dados de um componente em qualquer ponto no tempo, e não apenas no início.

No entanto, as props sãoimutáveis—um termo da ciência da computação que significa "inalterável". Quando um componente precisa alterar suas props (por exemplo, em resposta a uma interação do usuário ou novos dados), ele terá que "pedir" ao seu componente pai para passarprops diferentes—um novo objeto! Suas props antigas serão então descartadas e, eventualmente, o mecanismo JavaScript recuperará a memória ocupada por elas.

Não tente "alterar props".Quando você precisar responder à entrada do usuário (como mudar a cor selecionada), você precisará "definir estado", o que você pode aprender emEstado: A Memória de um Componente.

Recapitulação

• Para passar props, adicione-os ao JSX, assim como faria com atributos HTML.
• Para ler props, use a sintaxe de desestruturaçãofunction Avatar({ person, size }).
• Você pode especificar um valor padrão comosize = 100, que é usado para props ausentes eundefined.
• Você pode encaminhar todas as props com a sintaxe de espalhamento JSX<Avatar {...props} />, mas não a use em excesso!
• JSX aninhado como<Card><Avatar /></Card>aparecerá como a propchildrendo componenteCard.
• Props são instantâneos somente leitura no tempo: cada renderização recebe uma nova versão das props.
• Você não pode alterar props. Quando precisar de interatividade, será necessário definir estado.