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 super
como 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