Propriedades do React - Props
As props (abreviação de “propriedades”) em React são um mecanismo essencial para a passagem de dados entre componentes. Elas permitem que informações fluam de um componente pai para um componente filho, permitindo a criação de interfaces dinâmicas e reutilizáveis.
-
As props são somente leitura. O componente filho não pode modificar diretamente as props que recebe do componente pai.
-
A passagem de dados através de props segue o padrão unidirecional (do pai para o filho). Isso significa que as props fluem de cima para baixo na hierarquia de componentes.
As props são basicamente objetos JavaScript que contêm dados específicos passados de um componente pai para um componente filho. Elas são definidas no componente pai e acessadas no componente filho como parâmetros da função de componente.
// Componente Pai
import React from 'react';
import Filho from './Filho';
const Pai = () => {
const mensagem = 'Olá, mundo!';
return <Filho mensagem={mensagem} />;
};
// Componente Filho
const Filho = (props) => {
return <p>{props.mensagem}</p>;
};No exemplo acima, o componente Pai passa a mensagem para o componente Filho através de uma prop chamada mensagem. O componente Filho recebe essa prop e a utiliza na renderização.
Utilização de Props em componentes funcionais
Em componentes funcionais, as props são passadas como argumentos para a função do componente. Utilizando a desestruturação, é possível acessar props específicas de maneira mais concisa:
const Saudacao = ({ nome }) => {
return <p>{`Olá, ${nome}!`}</p>;
};Utilização de Props em componentes de classe
Em componentes de classe, as props são acessadas através da palavra-chave this:
// Componente de Classe
import React, { Component } from 'react';
class Saudacao extends Component {
render() {
return <p>{`Olá, ${this.props.nome}!`}</p>;
}
}Props padrão (Default Props)
É possível fornecer valores padrão para props usando a propriedade defaultProps. Isso é útil quando uma propriedade não é obrigatória e pode ser usada mesmo que não seja fornecida pelo componente pai.
// Componente com Default Props
const Saudacao = ({ nome = 'Visitante' }) => {
return <p>{`Olá, ${nome}!`}</p>;
};
Saudacao.defaultProps = {
nome: 'Visitante',
};