Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não ha explicações do Props

Ola,

Observei que no projeto que é entregue no inicio da Aula 5 é apresentado alguns metodos que não são abordados no video e o construtor tem o props que não consigo entender ao que se refete. No final da aula 4 é informado que aprendemos o atributo props conforme descrevo abaixo:

O que aprendemos nessa aula:

Como o this do JS é dinâmico e como lidar com isso

  • Referências para funções e injeção de dependências
  • Associando referências através do bind
  • Atributo props dos componentes React
  • Passando propriedades para elementos filhos

Gostaria de maiores detalhamentos ao que se refere este atributo e como emprega-lo.

1 resposta
solução!

Fala Abner, tudo bem?

Uma props é o valor que recebemos quando passamos algo como atríbuto ao utilizar o nosso componente, em que para definir uma prop é necessário o nome, e o valor do mesmo. Veja um exemplo:

<Formulario />

Aqui temos um componente de formulário que criamos, para passarmos algum valor como props, fazemos assim:

<Formulario teste="testando" />

Em que passamos um atributo de nome teste e como valor testando, ambos podem ter qualquer nome e qualquer valor, nesse caso passamos um texto, porém você pode passar como props qualquer coisa, seja uma função, uma váriavel, etc.. Veja:

const formEnviado = true;

function enviarFormulario() {
    console.log('Enviei o seu formulário :D')
}

<Formulario aoEnviar={enviarFormulario} foiEnviado={formEnviado} /> //Aqui estamos passando uma props de nome  aoEnviar, e como valor passamos, entre chaves, o nome da nossa função.

E veja que podemos passar quantas props desejarmos, como visto nesse exemplo também passei, além da função, a variavel chamada formEnviado.

Tá, mas como eu utilizo essas props? É bem simples. Onde você criou esse seu componente, você irá receber essas props dentro do construtor e do supercomo um parametro chamado props, que é um objeto contendo todas as suas props passadas. Veja:

class Formulario extends Components {
    constructor(props) {
        super(props) 
    }

    render() {
        <form onSubmit={props.enviarFormulario}>
        </form>
    }
}

Viu que recebemos props como parâmetro e utilizamos essa prop como objeto? Utilizando props.enviarFormulario que irá executar essa função que haviamos criado, quando fizermos o submit. Porém para facilitar, você pode desestruturar o parâmetro props assim:

class Formulario extends Components {
    constructor({enviarFormulario}) {
        super({enviarFormulario})) 
    }

    render() {
        <form onSubmit={enviarFormulario}>
        </form>
    }
}

Ficou bem mais simples desestruturando o nosso objeto props.

E é assim que se passa uma props e a utiliza, para ver mais sobre, pode consultar a documentação clicando aqui

Espero ter ajudado, bons estudos e qualquer dúvida pode contar com a gente :D