@composi/core:
Propiedades
Pasando los Props Para Abajo
Mientras se desarolla algo con componentes, las props son las manera por la cual se pasan datos al componente. Los dataos pueden ser cualquier cosa--cadena, número, boleano, vector, objeto, función o aún otro componente. Y, por supuesto se pueden pasar las props de un padre a sus hijos.
Examinemos un ejemplo sencillo:
See the Pen @composi/core - Props-1 es by Robert Biggs (@rbiggs) on CodePen.
Usando Más Props
Puedes usar tantos props como necesitas.
See the Pen @composi/core - Props-2 es by Robert Biggs (@rbiggs) on CodePen.
En el ejemplo anterior pasamos más valores al componente através de las props, pero es un poco fastidioso accediéndolos del parámetro props. Podemos usar la desestructuración para simplemente acceder a las props.
Desestructurar los Argumentos
Aquí desestructuramos el argumento que recibe nuestra etiqueta. Básicamente, estamos dividiendo el argumento props en sus partes constitutivas como un objeto literal.
See the Pen @composi/core - Props-3 es by Robert Biggs (@rbiggs) on CodePen.
Desestructuración de la Asignación de Props
En lugar de pasar las props individualmente, usaremos la desestructuración para pasarlas a todos como un objeto literal. Lo hacemos creando un objeto literal de los valores que queremos usar. Luego pasamos eso a nuestro componente utilizando llaves y el operador de propagación.
See the Pen @composi/core - Props-4 es by Robert Biggs (@rbiggs) on CodePen.
La destrucción de la asignación de propiedades resulta en un código más limpio y fácil de leer. Las props
hacen que los componentes sean dinámicos y los imbuye con superpoderes.
Vector como Prop para las Listas
Como mencionamos al principio, se puede pasar cualquier valor posible como prop. A continuación, vamos a mostrar cómo pasar un vector de objetos para que podamos generar una lista. Para hacer esto más útil, nos aseguraremos de que nuestros artículos tengan claves únicas. Los usaremos para ingresar los elementos individuales de la lista. Para una lista estática esto es innecesario. Pero si deseas permitir que el usuario elimine o cambie el orden de los elementos de la lista, las claves permitirán que Composi entienda cómo actualizar el DOM de la manera más eficiente.
Cuando se trata de un vector de datos como prop, debemos abandonar JSX y usar el JavaScript puro. Puedes hacer eso dentro del JSX usando claves.
Usar las claves para las Listas
Fíjate cómo accedemos a la propiedad data. Como se trata de un vector, usamos map para recorrer cada elemento del vector y devolver un ítem de la lista. El ítem de la lista tiene una propiedad
key={item.key}. key viene siendo el término que se usa para clave en Composi. Esto realmente no se procesa en el DOM. En su lugar, Composi conserva este valor en el nodo virtual que crea para la lista. Si Composi necesita volver a renderizar la lista debido a que el orden de los
elementos de la lista cambió, utilizará los valores de las claves en los elementos de la lista virtual para comprender mejor cómo reutilizar los nodos DOM para actualizar la lista. Porque al pasar un vector como prop, tuvimos que cambiar la desestructuración para manejar un vector utilizando el formato {... {data}}.
See the Pen @composi/core - Pasar Props a los Hijos by Robert Biggs (@rbiggs) on CodePen.
Pasar Props a los Hijos
Una de las cosas más importantes de JSX y props es el hecho de que se pueden pasar de padres a hijos. A diferencia de los frameworks basados en el concepto de enlace de datos bidireccional. JSX abarca la práctica del flujo de datos unidireccional. Con el enlace de dos datos es muy difícil determinar en cuál dirección está ocurriendo un problema. Con el flujo de datos unidireccional, esto es mucho más fácil.
En el siguiente ejemplo, pasamos los datos de los ítemes de la lista a un componente secundario, que itera sobre los datos para crear los ítemes de la lista.
See the Pen @composi/core - Pasar Props a los Hijos by Robert Biggs (@rbiggs) on CodePen.
Composición Avanzada
En este ejemplo, estamos haciendo una composición avanzada, utilizando la desestructuración y pasando las propiedades y los niños al componente secundario para afectar la manera en que se renderiza el componente entero. Abre el ejemplo en Codepen y puedes cambiar el color del borde cambiando el valor del color en la etiqueta BordeLujoso. Actualmente está configurado con color "rojo", pero puede cambiarlo a "verde" o "azul".
See the Pen @composi/core - Pasar Props a lost Hijos-2 by Robert Biggs (@rbiggs) on CodePen.