React Props (Propiedades)

React props (propiedades)Las propiedades son la forma que tiene React para pasar par谩metros de un componente padre a los hijos.normal que un componente pase datos a los componentes hijos, sin embargo, no es lo 煤nico que se puede pasar, si no que existe ocasiones en las que los padres mandar funciones a los hijos, para que estos ejecuten operaciones de los padres, puede sonar extra帽o, pero ya veremos c贸mo funciona.

Los props se env铆an a los componentes al momento de crearlos, y es tan f谩cil como mandar las propiedades como un atributo del <tag>聽 del componente, por ejemplo, supongamos que tenemos un componente <ItemList>聽, el cual necesita recibir los datos de un producto, dicho producto debe contener el nombre y un precio:

Mandar objetos es una forma simple y limpia de mandar propiedades, pero tambi茅n lo podr铆amos hacer en varias propiedades, por ejemplo:

La 煤nica diferencia entre estos dos m茅todos ser谩 la forma de recuperar las propiedades. Para recuperar una propiedad es necesario usar el prefijo, this.props聽, por lo que en el primer ejemplo, el 铆tem se recupera como this.props.product聽, y en el segundo ejemplo, ser铆a this.props.productName聽 para el nombre y this.props.productPrice聽 para el precio.

Una limitaci贸n que tenemos para mandar props, es la de no utilizar un nombre de propiedad que coincida con los atributo de React, por ejemplo: onClick聽, onChange聽, className聽, etc.

 

Las propiedades son inmutables
La propiedad tiene la caracter铆stica de ser inmutables, es decir, no debemos de modificarlas o actualizarlas, pues es considerada una mala pr谩ctica, solo las debemos utilizar de modo lectura.

 

 

Regresemos al ejemplo del formulario que vimos en la secci贸n de componentes con estado y sin estado del que hablamos en un art铆culo pasado. En este ejemplo, creamos el componente App聽 y sobre este montamos un formulario de registro de empleados. Ahora bien, 驴qu茅 pasar铆a si quisi茅ramos que la acci贸n de guardar la controlara el componente padre? La soluci贸n es simple, el componente padre tendr铆a que enviar como props la funci贸n de guardar, para que el hijo la ejecute.

Lo primero ser谩 pasar el formulario a un componente externo, por lo cual, crearemos un componente llamado EmployeeForm聽, el cual se ver谩 como a continuaci贸n:

Este componente tiene dos cosas a resaltar, lo primero es que agregamos un bot贸n (l铆nea 44), el cual, al ser presionado, ejecutar la funci贸n saveEmployee聽 declarada en este mismo componente, lo segundo es la funci贸n saveEmployee聽 que declaramos en la l铆nea 24, la cual ejecuta la funci贸n save聽 enviada por el parent como prop.

Por otra parte, tenemos al componente App聽 que ser谩 el padre del componente anterior:

Podemos ver que al momento de crear el componente EmployeeForm聽, este le env铆a como una prop la funci贸n save聽. De esta forma, cuando el componente EmployeeForm聽, ejecute la propiedad, se lanzar谩 una alerta con los datos capturados (l铆nea 8).

 

Cuando es necesario “bindear” una funci贸n con una prop o queremos utilizar una funci贸n en un evento como onClick聽, onChange聽, etc. es necesario siempre empezar con this聽, y finalizar con binding(this)聽 como se ve a continuaci贸n this.<function>.bind(this)聽.

 

Debido a que un componente padre puede enviar cualquier propiedad a sus componentes hijos, React proporciona un mecanismo para validar las propiedades que espera un determinado componente, validar su estructura, tipo de dato y definir un valor por default, para eso existen dos t茅rminos llamados PropTypes y DefaultProps, de los cuales estaremos hablando en otra ocasi贸n.

 

Conclusiones

Como hemos visto, las propiedades son el 煤nico m茅todo que ofrece React para transmitir informaci贸n de forma descendente, desde un componente padre hacia sus hijos, sin embargo, existe otras alternativas como Redux, una librer铆a que permite gestionar la informaci贸n de la aplicaci贸n totalmente desacoplada de los componentes.

 

 

 

 

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *