Mostrar una lista de elementos es algo que los desarrolladores web hacen todo el tiempo. React no tiene una forma estándar de representar una lista de elementos, sin embargo, hay algunos patrones que es bueno conocer. Vamos a explorar algunos de ellos en este post.

Matriz de niños

Comencemos con el enfoque básico que debería funcionar en la mayoría de los casos, que consiste en pasar elementos de lista en childrenprop.

Uso React.Children.map , por lo que no tengo que preocuparme de si childrense trata de un solo elemento o de una serie de elementos. Tenga en cuenta que el ListViewcomponente es responsable de la estructura de la lista; en este ejemplo, afirma la disposición de las etiquetas uly semánticamente válida. liAsí es como puede verse un ejemplo de uso

¡Muy simple, muy legible! También puede usar este enfoque si no sabe la cantidad de elementos por adelantado.

Solo recuerda que cada vez que renderizas una lista que se puede reordenar o filtrar, debes proporcionar la clave (React te avisará si no lo haces).

Prop de renderizado

El segundo enfoque es más flexible pero también un poco más complejo. Estoy hablando del patrón de apoyo de renderizado . Así es como puede verse el código de la lista.

Tal vez haya notado que no es reutilizable ya que define explícitamente el Itemtipo. Podemos hacerlo mejor, usemos TypeScript Generics para que la lista no esté acoplada a la Iteminterfaz concreta.

Esto es mucho mejor, ahora funcionará con cualquier conjunto de elementos, siempre que todos los elementos satisfagan la AbstractIteminterfaz. Veamos cómo se puede usar esto.

Tenga en cuenta que TypeScript interesó correctamente el tipo de elemento en la rendererfunción.

Entonces, ¿por qué el patrón render prop es más poderoso? Tiene acceso a los datos de elementos sin procesar, no solo a los nodos de reacción como el enfoque anterior. Esto puede tener muchos casos de uso. Como ejemplo, puedo proporcionar un predicado que se usará para filtrar elementos antes de mostrarlos.

El cliente puede especificar cualquiera filterFnque acepte un solo elemento y devuelva un valor booleano.

En este ejemplo, solo se representarán los dos primeros elementos.

Resumen

Presenté algunos componentes básicos que se pueden ajustar para satisfacer necesidades más específicas. Espero que les sean útiles, ¡gracias por leer!