Masterizando Props e PropTypes em React

Adereços e PropTypes confundem você? Você não está sozinho. Vou guiá-lo através de tudo sobre props e PropTypes. Eles podem tornar sua vida significativamente mais fácil ao desenvolver aplicativos React. Este tutorial apresentará a você os detalhes sobre props, passando e acessando props e passando informações para qualquer componente usando props.

Construir aplicativos React envolve dividir a interface do usuário em vários componentes, o que implica que precisaremos passar dados de um componente para outro. Props são um mecanismo importante para passar informações entre componentes do React, e vamos analisá-los em detalhes. Este artigo estaria incompleto sem examinar PropTypes, porque eles garantem que os componentes usem o tipo de dados correto e passem os dados corretos.

É sempre uma boa prática validar os dados que obtemos como props usando PropTypes. Você também aprenderá a integrar PropTypes no React, verificar tipos com PropTypes e usar defaultProps. No final deste tutorial, você entenderá como usar props e PropTypes de forma eficaz. É importante que você já tenha conhecimento básico de como o React funciona.

Compreendendo adereços

React nos permite passar informações para componentes usando coisas chamadas props (abreviação de propriedades). Como o React compreende vários componentes, os props tornam possível compartilhar os mesmos dados entre os componentes que precisam deles. Ele faz uso de fluxo de dados unidirecional (componentes pai para filho). No entanto, com uma função de retorno de chamada, é possível passar props de volta de um componente filho para um componente pai.

Esses dados podem vir de diferentes formas: números, strings, arrays, funções, objetos, etc. Podemos passar props para qualquer componente, assim como podemos declarar atributos em qualquer tag HTML. Dê uma olhada no código abaixo:

 <PostList posts={postsList} />

Neste snippet, estamos passando um prop chamado posts para um componente chamado PostList . Este prop tem um valor de {postsList} . Vamos detalhar como acessar e passar dados.

Passando e acessando adereços

Para tornar este tutorial interessante, vamos criar um aplicativo que mostre uma lista de nomes e postagens de usuários. A demonstração do aplicativo é mostrada abaixo:

O aplicativo compreende coleções de componentes: um componente App , um componente PostList e um componente Post .

A lista de postagens exigirá dados como o content e o name do usuário. Podemos construir os dados assim:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

Depois disso, precisamos do componente App para extrair os dados, aqui está a estrutura básica desse componente:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

Aqui, estamos passando um array de posts como prop para o PostList (que vamos criar daqui a pouco). O componente pai, PostList , acessará os dados em postsList , que serão passados ​​como props de posts para o componente filho ( Post ). Se você se lembrar, nosso aplicativo é composto por três componentes, que criaremos à medida que prosseguirmos.

Vamos criar a PostList :

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

O componente PostList receberá posts como prop. Em seguida, ele percorrerá a prop posts , this.props.posts , para retornar cada item postado como um componente Post (que modelaremos mais tarde). Além disso, observe o uso da key no trecho acima. Para quem é novo no React, uma chave é um identificador exclusivo atribuído a cada item em nossa lista, permitindo-nos distinguir entre os itens. Nesse caso, a chave é o id de cada post. Não há chance de dois itens terem o mesmo id , então é um bom dado a ser usado para essa finalidade.

Enquanto isso, as propriedades restantes são passadas como props para o componente Post ( <Post {...post} /> ).

Então, vamos criar o componente Post e fazer uso dos adereços nele:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

Estamos construindo o componente Post como um componente funcional, em vez de defini-lo como um componente de classe, como fizemos para o componente PostList . Eu fiz isso para mostrar como acessar props em um componente funcional, comparado a como acessamos em um componente de classe com this.props . Por ser um componente funcional, podemos acessar os valores usando props .

Aprendemos agora como passar e acessar props, e também como passar informações de um componente para outro. Vamos considerar agora como os adereços funcionam com funções.

Passando funções via adereços

Na seção anterior, passamos uma matriz de dados como props de um componente para outro. Mas e se estivermos trabalhando com funções? React nos permite passar funções entre componentes. Isso é útil quando queremos acionar uma mudança de estado em um componente pai de seu componente filho. Os adereços devem ser imutáveis; você não deve tentar alterar o valor de uma prop. Você tem que fazer isso no componente que o transmite, que é o componente pai.

Vamos criar um aplicativo de demonstração simples que ouve um evento de clique e altera o estado do aplicativo. Para alterar o estado do aplicativo em um componente diferente, temos que passar nossa função para o componente cujo estado precisa ser alterado. Desta forma, teremos uma função em nosso componente filho que é capaz de mudar de estado.

Parece um pouco complexo? Eu criei um aplicativo React simples que muda de estado com o clique de um botão e renderiza uma informação de boas-vindas:

Na demonstração acima, temos dois componentes. Um é o componente App , que é o componente pai que contém o estado do aplicativo e a função para definir o estado. O ChildComponent será o filho neste cenário e sua tarefa é renderizar as informações de boas-vindas quando o estado mudar.

Vamos dividir isso em código:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

Observe que definimos nosso estado como true e o método para alterar o estado é criado no componente App . Na função render() , passamos o estado do aplicativo, como prop isShow , para o componente ChildComponent . Também passamos a função toggleShow() como um prop chamado clickMe .

Usaremos isso no ChildComponent que se parece com isso:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

A coisa mais importante acima é que o componente App passa uma função como um prop para o ChildComponent . A função clickMe() é usada para o manipulador de cliques no ChildComponent , enquanto o ChildComponent não conhece a lógica da função — ele apenas aciona a função quando o botão é clicado. O estado é alterado quando a função é chamada e, uma vez que o estado mudou, o estado é passado como um prop novamente. Todos os componentes afetados, como o filho em nosso caso, serão renderizados novamente.

Temos que passar o estado do app, isShow , como prop para o ChildComponent , pois sem ele não podemos escrever a lógica acima para exibir greeting quando o estado for atualizado.

Agora que vimos as funções, vamos para a validação. É sempre uma boa prática validar os dados que obtemos por meio de props usando PropTypes. Vamos mergulhar nisso agora.

O que são PropTypes no React?

PropTypes são um mecanismo para garantir que os componentes usem o tipo de dados correto e passem os dados corretos, e que os componentes usem o tipo certo de props e que os componentes receptores recebam o tipo certo de props.

Podemos pensar nisso como um cachorro sendo entregue a uma loja de animais. A loja de animais não quer porcos, leões, sapos ou lagartixas – quer filhotes. PropTypes garantem que o tipo de dados correto (filhote) seja entregue à loja de animais, e não a algum outro tipo de animal.

Na seção acima, vimos como passar informações para qualquer componente usando props. Passamos props diretamente como um atributo para o componente e também passamos props de fora do componente e os usamos nesse componente. Mas não verificamos que tipo de valores estamos obtendo em nosso componente por meio de props ou se tudo ainda funciona.

Cabe a nós validar os dados que obtemos em um componente por meio de adereços. Mas em um aplicativo complexo, é sempre uma boa prática validar esses dados.

Usando PropTypes

Para fazer uso de PropTypes, temos que adicionar o pacote como dependência à nossa aplicação através do npm ou Yarn, executando o seguinte código na linha de comando. Para npm:

 npm install --save prop-types

E para o fio:

 yarn add prop-types

Para usar PropTypes, primeiro precisamos importar PropTypes do pacote prop-types:

 import PropTypes from 'prop-types';

Vamos usar ProTypes em nosso aplicativo que lista as postagens dos usuários. Aqui está como vamos usá-lo para o componente Post :

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

Aqui, PropTypes.string e PropTypes.number são validadores de props que podem ser usados ​​para garantir que as props recebidas sejam do tipo correto. No código acima, estamos declarando que id é um número, enquanto content e user são strings.

Além disso, PropTypes são úteis na captura de bugs. E podemos impor a passagem de props usando isRequired :

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes têm muitos validadores. Aqui estão alguns dos mais comuns:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

Mais tipos estão disponíveis, que você pode conferir na documentação do React].

Adereços padrão

Se quisermos passar algumas informações padrão para nossos componentes usando props, o React nos permite fazer isso com algo chamado defaultProps . Nos casos em que PropTypes são opcionais (ou seja, eles não estão usando isRequired ), podemos definir defaultProps . As props padrão garantem que as props tenham um valor, caso nada seja passado. Aqui está um exemplo:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

Aqui, defaultProps será usado para garantir que this.props.name tenha um valor, caso não seja especificado pelo componente pai. Se nenhum nome for passado para a classe Profile , ela terá a propriedade padrão Stranger à qual recorrer. Isso evita qualquer erro quando nenhuma prop é passada. Eu aconselho você sempre a usar defaultProps para cada PropType opcional.

Conclusão

Espero que você tenha gostado de trabalhar com este tutorial. Felizmente, ele mostrou a você o quão importantes props e propTypes são para construir aplicativos React, porque sem eles, não seríamos capazes de passar dados entre componentes quando as interações acontecem. Eles são uma parte central da arquitetura orientada a componentes e de gerenciamento de estado em que o React foi projetado.

PropTypes são um bônus para garantir que os componentes usem o tipo de dados correto e passem os dados corretos, e que os componentes usem o tipo certo de props e que os componentes receptores recebam o tipo certo de props.

Se você tiver alguma dúvida, pode deixá-la na seção de comentários abaixo, e ficarei feliz em responder a todas e resolver qualquer problema com você.

Referências

• “Pensando em React”, React Docs
• “Lista e Chaves”, React Docs
• “Verificação de tipos com PropTypes”, React Docs
• “Como passar adereços para componentes no React”, Robin Wieruch