4.2-Propriedades.md

Propriedades

Nesse capitulo você irá aprender o que são Propriedades nos componentes React.

Lembra das tags do HTML? Elas podem receber algumas propriedades, correto? Como no exemplo abaixo, onde a tag input recebe as propriedades type (que é igual a "text") e class (que é igual a "minha-classe"):

<input type="text" class="minha-classe" />

No React também é possível que nossos componentes façam o mesmo:

const elemento = <ComponenteComProps name="React4noobs">

Quando o React vê um componente criado por você, ele irá passar todos os atributos JSX e componentes filhos para um objeto chamado "props"

Com isso podemos acessar esse objeto de dentro do componente.

Exemplo 1: Componentes funcionais

Como dito anteriormente, o React passa todas essas propriedades por um objeto props, então no caso dos componentes funcionais ele vem como um parametro da função.

import React from 'react'

function ComponenteComProps(props){
  return(
    <div>
      <h1>{props.title}</h1>
      <h2>{props.subtitle} </h2>
    </div>
  )
}
// Nosso componente podee receber as propriedades "title" e "subtitle".

function Page(){
  return(
    <div>
      <h1> Meus posts </h1>
      <ComponenteComProps title="Meu primeiro titulo" subtitle="Meu primeiro subtitulo">
    </div>
  )
}

Exemplo 2: Componentes de classe

Nos componentes de classe podemos acessar o objeto props a partir do this.

import React from 'react'

class ComponenteComProps exteds React.Component{
  render(){
    return(
    <div>
      <h1>{this.props.title}</h1>
      <h2>{this.props.subtitle} </h2>
    </div>
  )

  }
}
// Nosso componente podee receber as propriedades "title" e "subtitle".

class Page extends React.Component{
  render(){
    return(
    <div>
      <h1> Meus posts </h1>
      <ComponenteComProps title="Meu primeiro titulo" subtitle="Meu primeiro subtitulo">
    </div>
  )
  }
}

Importante

Não sei se prestaram atenção, mas em um trecho acima foi dito que o React também passa os componentes filhos para esse objeto props. Para acessar esses objetos, existe uma propriedade dentro do props chamada children, ela contem TODOS os filhos do componente.

Ex:

import React from "react";

// O objetivo desse componente é ficar por "cima" de todos os outros.
function ComponenteCaixa(props) {
  return <div>{props.children}</div>;
}

function Page() {
  return (
    <ComponenteCaixa>
      <h1> titulo </h1>
      <h1> titulo </h1>
      <h1> titulo </h1>
      <h1> titulo </h1>
      <h1> titulo </h1>
    </ComponenteCaixa>
  );
}

// Agora todos esses elemementos dentro do componente caixa serão renderizados pelo mesmo.

Podemos concluir que o React transforma todos os atributos e filhos em um unico objeto e podemos acessa-los através do objeto props.

Nos próximos capítulos vocês aprenderão sobre Ciclo de vida de um componente e Estados.

Ir para Próxima Seção

Made with 💜