Uso de props en componentes

Uso de props en componentes

Los props

Los props son los datos que se pasan a un elemento JSX. Por ejemplo, className, src, alt, width y height son algunos de los props que podemos pasar a un elemento <img>

				
					function App() {
 return (
     <img decoding="async"
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
     )
 }
				
			

Propiedad de parámetro

Una propiedad es un parámetro que se transfiere de un componente principal a un componente secundario. Digamos que queremos crear un componente WelcomeMessage que muestre un texto de bienvenida, incluido el nombre de usuario del componente App.

Este componente podría verse así:

				
					export default function WelcomeMessage(props) {
 return (
     <div>
         <p>Bievenido {props.userName}!</p>
         <p>Gracias por ingresar al blog de Paulo G.</p>
     </div>
     )
 }
				
			

Luego, podemos incluirlo en el componente App:

				
					export default function App() {
 const userName = "Carol";
 return (
     <div>
         <WelcomeMessage userName={userName}/>
         <ReactButton/>
     </div>
     )
 }
				
			

El nombre del props se usa como un atributo en la etiqueta JSX del componente secundario. Al utilizar los props como parámetro para el componente secundario, se puede acceder automáticamente a todos esos atributos en el componente secundario, como el nombre de usuario en nuestro ejemplo.

Así mismo podemos establecer la cantidad de atributos que necesitemos como puede ser el apellido del usuario.

				
					export default function WelcomeMessage(props) {
 return (
     <div>
         <p>Bievenido {props.userName} {userLastName}!</p>
         <p>Gracias por ingresar al blog de Paulo G.</p>
     </div>
     )
 }
				
			

Luego, podemos incluirlo nuevamente en el componente App:

				
					export default function App() {
 const userName = "Carol";
 const userLastName = "Gilces";
 return (
     <div>
         <WelcomeMessage userName={userName} userLastName={userLastName}/>
         <ReactButton/>
     </div>
     )
 }

				
			

Lo que hace que React sea tan eficiente es el hecho de que cada vez que cambia el valor de un prop, solo se vuelven a representar aquellos componentes que se ven afectados por ese cambio. Esto reduce enormemente los costos de renderizado, especialmente para aplicaciones grandes con muchas capas.

Arrays como props

Usar arrays como props en React Native es una práctica común y útil. Aquí tienes algunos casos en los que es apropiado utilizar un array como prop:

Listas de elementos dinámicos

Cuando necesitas renderizar una lista de elementos (como artículos, comentarios, imágenes, etc.), puedes pasar un array como prop al componente que se encargará de mostrarlos.
Por ejemplo, si estás construyendo una aplicación de noticias, puedes pasar un array de objetos que representen las noticias como prop a un componente de lista. El componente de lista iterará sobre los elementos del array y los mostrará en la interfaz de usuario.

Personalización de componentes reutilizables

Los arrays como props permiten personalizar componentes reutilizables.
Imagina que tienes un componente de tarjeta que muestra información sobre un producto. Puedes pasar un array de características específicas del producto (como tallas disponibles, colores, etc.) como prop al componente de tarjeta. De esta manera, puedes reutilizar el mismo componente para diferentes productos.

Configuración de opciones

Los arrays como props son útiles cuando necesitas proporcionar opciones o configuraciones a un componente.
Por ejemplo, si tienes un componente de selección múltiple, puedes pasar un array de opciones como prop. El componente de selección múltiple mostrará las opciones y permitirá al usuario elegir una o más de ellas.

Datos estáticos o dinámicos

Puedes usar arrays como props para pasar tanto datos estáticos como dinámicos.

Si los datos son estáticos (por ejemplo, una lista predefinida de categorías), puedes definir el array directamente en el componente padre y pasarlo como prop.

Si los datos son dinámicos (por ejemplo, comentarios de usuarios en una publicación), puedes obtener el array desde una fuente de datos (como una API) y pasarlo como prop.

En resumen, usar arrays como props te permite crear componentes flexibles, reutilizables y configurables. Piensa en las necesidades específicas de tu aplicación y decide cuándo es apropiado utilizar un array como prop en tus componentes React Native.

Aquí tienes un ejemplo de un componente en React Native que recibe un array de datos de cursos de cursos de programación como prop el cual es recorrido con el método map que nos sirve para recorrer array donde obtenemos el elemento y el índex para renderizarlos en el componente Text de React Native pasándole en la propiedad key el índex del array para saber su posición y el elemento que lo contiene para presentarlo como texto:

				
					// ArrayCursos.js

import { Text } from 'react-native';
export default function Cursos(props) {
  return (
      <Text>
        {props.miArray.map((elemento, index)=>(
          <Text key={index}>{elemento}</Text>
        ))}
      </Text>
  );
}
				
			

Luego, lo incluimos en el componente App donde asignamos los datos de los cursos de programación al array que esta dentro de la constante miArray para pasarlo como props a nuestro componente Cursos.

				
					// App.js
import { Text, SafeAreaView } from 'react-native';
import Cursos from './components/ArrayCursos'
export default function App() {
  const miArray = ['Pyton', 'Angular', 'React'];
  return (
    <SafeAreaView>
      <Cursos miArray={miArray}/>
    </SafeAreaView>
  )
}
				
			

Consejos para usar props

  • Al enviar props, asegúrate de enviar solamente los datos necesarios, así podemos evitar enviar demasiada información entre los componentes.
  • Si necesitas enviar varios valores juntos, considera enviarlos en un objeto o matriz para mantenerlos organizados y poder acceder fácilmente a ellos.
  • Si necesitas enviar una función, asegúrate de definirla en el componente padre y pásala a los componentes hijos como props. No definas la misma función varias veces en diferentes componentes.
  • Si necesitas modificar una prop, deberías hacerlo en el componente padre, no en el componente hijo. Esto se debe a que las props son inmutables, lo que significa que no puedes modificarlas directamente en el componente hijo.

Conclusiones

  • Las props permiten que los componentes se comuniquen entre sí. Los componentes padres pueden enviar información a sus componentes hijos mediante el uso de props. Esto facilita la transferencia de datos y la personalización de los componentes.
  • Al pasar props a los componentes, puedes reutilizarlos en diferentes partes de tu aplicación. Esto evita la duplicación de código y mejora la eficiencia.
  • Las props te permiten mantener tus componentes “limpios”. En lugar de escribir directamente los datos en el componente, puedes pasarlos a través de las props desde otro componente. Esto ayuda a mantener un mejor control del flujo de información.
  • Puedes configurar tus propios componentes para que se rendericen de diferentes maneras con distintas props. Por ejemplo, puedes ajustar el tamaño, el contenido o los estilos de un componente según las props que le pases.
  • Las props pueden contener cualquier valor de JavaScript, como objetos, arrays y funciones. Esto brinda flexibilidad y permite crear interfaces de usuario dinámicas.

Fuente

Facebook
Twitter
LinkedIn

Post relacionados

Post recientes

Search