O coração do React são componentes. Você pode aninhar esses componentes do mesmo modo que você aninha tags HTML, o que torna tudo mais fácil quando escrevemos JSX, afinal, lembra muito o bom e velho HTML.
Quando eu comecei com React, eu pensei “Basta usar props.children e pronto. Eu sei tudo sobre o objeto .children”. Te digo, como eu estava errado! 🙂
Como estamos trabalhando com JavaScript, nós podemos mudar o .children. Nós podemos passar propriedades para ele, decidir se queremos que ele renderize algo ou não, usá-lo do jeito que quisermos. Vamos mergulhar no poder do .children em React!
Abaixo, segue os tópicos que iremos abortar nesse artigo:
Tabela de conteúdo:
- Elementos filhos
- Tudo pode ser um elemento filho
- Função como elemento filho
- Manipulando .children
- Usando loops em .children
- Contando .children
- Convertendo .children em um array
- Permitir apenas um elemento filho
- Editando .children
- Mudando as propriedades dos elementos filhos
- Clonando imutavelmente os elementos filhos
- É isso aí!
Elementos filhos
Vamos dizer que temos um componente , que contém componentes como elementos filhos. Usamos da seguinte maneira:
<Grid> <Row /> <Row /> <Row /> </Grid>
Demo: http://www.webpackbin.com/Ekg_vyjPz
Esses três componentes Row são passados para o Grid como props.children. Usando um container como expressão (expression container, termo técnico do JSX para os colchetes), componentes pais podem renderizar os elementos filhos:
class Fullstop extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}
Não importa quantos elementos filhos você passe, ele sempre irá renderizar “Hello world!”, e nada mais.
Nota: O h1 no exemplo acima (assim como todas as tags HTML primitivas), está renderizando seu elemento filho, nesse caso, o nó de texto “Hello world!”
Continue lendo “React avançado — Utilizando “props.children” como função de primeira classe”