Mastering Props y PropTypes en React

¿Te confunden los accesorios y PropTypes? No estás solo. Lo guiaré a través de todo lo relacionado con accesorios y PropTypes. Pueden hacer su vida significativamente más fácil al desarrollar aplicaciones React. Este tutorial le presentará los detalles sobre accesorios, pasar y acceder a accesorios y pasar información a cualquier componente que use accesorios.

La creación de aplicaciones React implica dividir la interfaz de usuario en varios componentes, lo que implica que necesitaremos pasar datos de un componente a otro. Los accesorios son un mecanismo importante para pasar información entre los componentes de React, y los analizaremos con gran detalle. Este artículo estaría incompleto sin analizar PropTypes, ya que aseguran que los componentes usen el tipo de datos correcto y pasen los datos correctos.

Siempre es una buena práctica validar los datos que obtenemos como accesorios usando PropTypes. También aprenderá sobre la integración de PropTypes en React, la verificación de tipos con PropTypes y el uso de defaultProps. Al final de este tutorial, comprenderá cómo usar props y PropTypes de manera efectiva. Es importante que ya tengas conocimientos básicos de cómo funciona React.

comprensión de los accesorios

React nos permite pasar información a los componentes usando cosas llamadas props (abreviatura de propiedades). Debido a que React consta de varios componentes, los accesorios permiten compartir los mismos datos entre los componentes que los necesitan. Hace uso del flujo de datos unidireccional (componentes de padre a hijo). Sin embargo, con una función de devolución de llamada, es posible devolver accesorios de un componente secundario a uno principal.

Estos datos pueden venir en diferentes formas: números, cadenas, matrices, funciones, objetos, etc. Podemos pasar accesorios a cualquier componente, al igual que podemos declarar atributos en cualquier etiqueta HTML. Echa un vistazo al código a continuación:

 <PostList posts={postsList} />

En este fragmento, estamos pasando un accesorio llamado posts a un componente llamado PostList . Esta propiedad tiene un valor de {postsList} . Analicemos cómo acceder y pasar datos.

Pasando y Accediendo Props

Para que este tutorial sea interesante, creemos una aplicación que muestre una lista de nombres y publicaciones de los usuarios. La demostración de la aplicación se muestra a continuación:

La aplicación consta de colecciones de componentes: un componente App , un componente PostList y un componente Post .

La lista de publicaciones requerirá datos como el content y el name del usuario. Podemos construir los datos así:

 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", }, ];

Después de esto, necesitamos el componente de la App para extraer los datos. Esta es la estructura básica de ese componente:

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

Aquí, estamos pasando una serie de publicaciones como accesorio a PostList (que crearemos en un momento). El componente principal, PostList , accederá a los datos en postsList , que se pasarán como accesorios de posts al componente secundario ( Post ). Si recuerda, nuestra aplicación consta de tres componentes, que crearemos a medida que avancemos.

Vamos a crear la 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> ); } }

El componente PostList recibirá posts como su accesorio. A continuación, recorrerá la propiedad de posts , this.props.posts , para devolver cada elemento publicado como un componente de Post (que modelaremos más adelante). Además, tenga en cuenta el uso de la key en el fragmento anterior. Para aquellos que son nuevos en React, una clave es un identificador único asignado a cada elemento de nuestra lista, lo que nos permite distinguir entre elementos. En este caso, la clave es el id de cada publicación. No hay posibilidad de que dos elementos tengan el mismo id , por lo que es un buen dato para usar con este propósito.

Mientras tanto, las propiedades restantes se pasan como accesorios al componente Post ( <Post {...post} /> ).

Entonces, creemos el componente Post y hagamos uso de los accesorios que contiene:

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

Estamos construyendo el componente Post como un componente funcional, en lugar de definirlo como un componente de clase como hicimos con el componente PostList . Hice esto para mostrarle cómo acceder a los accesorios en un componente funcional, en comparación con cómo accedemos a ellos en un componente de clase con this.props . Debido a que este es un componente funcional, podemos acceder a los valores usando props .

Ahora hemos aprendido cómo pasar y acceder a accesorios, y también cómo pasar información de un componente a otro. Consideremos ahora cómo funcionan los accesorios con las funciones.

Pasar funciones a través de accesorios

En la sección anterior, pasamos una matriz de datos como accesorios de un componente a otro. Pero, ¿y si estamos trabajando con funciones en su lugar? React nos permite pasar funciones entre componentes. Esto es útil cuando queremos activar un cambio de estado en un componente principal desde su componente secundario. Se supone que los accesorios son inmutables; no debe intentar cambiar el valor de un accesorio. Debe hacerlo en el componente que lo transmite, que es el componente principal.

Vamos a crear una aplicación de demostración simple que escuche un evento de clic y cambie el estado de la aplicación. Para cambiar el estado de la aplicación en un componente diferente, debemos pasar nuestra función al componente cuyo estado necesita cambiar. De esta forma, tendremos una función en nuestro componente hijo que podrá cambiar de estado.

¿Suena un poco complejo? Creé una aplicación React simple que cambia de estado con solo hacer clic en un botón y muestra una información de bienvenida:

En la demostración anterior, tenemos dos componentes. Uno es el componente de la App , que es el componente principal que contiene el estado de la aplicación y la función para establecer el estado. ChildComponent será el elemento secundario en este escenario y su tarea es generar la información de bienvenida cuando cambie el estado.

Desglosemos esto en 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> ); } }

Tenga en cuenta que hemos establecido nuestro estado en true y el método para cambiar el estado se crea en el componente de la App . En la función render() , pasamos el estado de la aplicación, como la propiedad isShow , al componente ChildComponent . También pasamos la función toggleShow() como un accesorio llamado clickMe .

Usaremos esto en el ChildComponent que se ve así:

 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> ); } }

Lo más importante anterior es que el componente de la App transmite una función como apoyo al ChildComponent . La función clickMe() se usa para el controlador de clics en ChildComponent , mientras que ChildComponent no conoce la lógica de la función; solo activa la función cuando se hace clic en el botón. El estado cambia cuando se llama a la función, y una vez que el estado ha cambiado, el estado se transmite de nuevo como accesorio. Todos los componentes afectados, como el niño en nuestro caso, se renderizarán de nuevo.

Tenemos que pasar el estado de la aplicación, isShow , como apoyo al ChildComponent , porque sin él, no podemos escribir la lógica anterior para mostrar el greeting cuando se actualiza el estado.

Ahora que hemos visto las funciones, pasemos a la validación. Siempre es una buena práctica validar los datos que obtenemos a través de accesorios usando PropTypes. Vamos a sumergirnos en eso ahora.

¿Qué son los PropTypes en React?

PropTypes es un mecanismo para garantizar que los componentes usen el tipo de datos correcto y pasen los datos correctos, que los componentes usen el tipo correcto de accesorios y que los componentes receptores reciban el tipo correcto de accesorios.

Podemos pensar en ello como un cachorro entregado a una tienda de mascotas. La tienda de mascotas no quiere cerdos, leones, ranas o geckos, quiere cachorros. PropTypes garantiza que se entregue el tipo de datos correcto (cachorro) a la tienda de mascotas, y no algún otro tipo de animal.

En la sección anterior, vimos cómo pasar información a cualquier componente usando accesorios. Pasamos accesorios directamente como un atributo al componente, y también pasamos accesorios desde fuera del componente y los usamos en ese componente. Pero no verificamos qué tipo de valores obtenemos en nuestro componente a través de accesorios o si todo sigue funcionando.

Depende totalmente de nosotros validar los datos que obtenemos en un componente a través de accesorios. Pero en una aplicación compleja, siempre es una buena práctica validar esos datos.

Uso de tipos de propiedad

Para hacer uso de PropTypes, debemos agregar el paquete como una dependencia a nuestra aplicación a través de npm o Yarn, ejecutando el siguiente código en la línea de comando. Para npm:

 npm install --save prop-types

Y para hilo:

 yarn add prop-types

Para usar PropTypes, primero debemos importar PropTypes del paquete prop-types:

 import PropTypes from 'prop-types';

Usemos ProTypes en nuestra aplicación que enumera las publicaciones de los usuarios. Así es como lo usaremos para el componente Post :

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

Aquí, PropTypes.string y PropTypes.number son validadores de accesorios que se pueden usar para asegurarse de que los accesorios recibidos sean del tipo correcto. En el código anterior, declaramos que id es un número, mientras que el content y user son cadenas.

Además, PropTypes son útiles para detectar errores. Y podemos hacer cumplir los accesorios de paso usando isRequired :

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

PropTypes tiene muchos validadores. Estos son algunos de los más comunes:

 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 }

Hay más tipos disponibles, que puede consultar en la documentación de React].

Accesorios predeterminados

Si queremos pasar información predeterminada a nuestros componentes usando props, React nos permite hacerlo con algo llamado defaultProps . En los casos en que PropTypes son opcionales (es decir, no usan isRequired ), podemos establecer defaultProps . Los accesorios predeterminados aseguran que los accesorios tengan un valor, en caso de que no pase nada. Aquí hay un ejemplo:

 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> } }

Aquí, se utilizarán defaultProps para garantizar que this.props.name tenga un valor, en caso de que el componente principal no lo especifique. Si no se pasa ningún nombre a la clase Profile , tendrá la propiedad predeterminada Stranger a la que recurrir. Esto evita cualquier error cuando no se pasa ninguna propiedad. Le aconsejo que siempre use defaultProps para cada PropType opcional.

Conclusión

Espero que hayas disfrutado trabajando en este tutorial. Con suerte, le ha mostrado cuán importantes son los accesorios y los propTypes para crear aplicaciones React, porque sin ellos, no podríamos pasar datos entre componentes cuando ocurren interacciones. Son una parte central de la arquitectura basada en componentes y de administración de estado en torno a la cual se diseñó React.

PropTypes son una ventaja para garantizar que los componentes usen el tipo de datos correcto y pasen los datos correctos, que los componentes usen el tipo correcto de accesorios y que los componentes receptores reciban el tipo correcto de accesorios.

Si tiene alguna pregunta, puede dejarla en la sección de comentarios a continuación, y estaré encantado de responder a cada una y resolver cualquier problema con usted.

Referencias

• “Pensando en React”, React Docs
• “Lista y claves”, React Docs
• "Comprobación de tipos con PropTypes", React Docs
• “Cómo pasar accesorios a componentes en React”, Robin Wieruch