Jak nakreslit komponenty na základě pole?

Zobrazení komponent na základě pole v Reactu se obvykle provádí pomocí metody map.

Proces zahrnuje následující kroky:

1. Použití metody map k iteraci přes prvky pole.
2. Pro každý prvek je vrácena instance požadované komponenty.
3. Každé vykreslené komponentě je přiřazena unikátní vlastnost key pro optimalizaci výkonu Reactu.

Příklad s funkční komponentou:

import React from 'react';

const ItemComponent = ({ data }) => (
  <div>
    <p>{data.text}</p>
  </div>
);

const ListComponent = ({ items }) => (
  <div>
    {items.map(item => (
      <ItemComponent key={item.id} data={item} /> // Vyžadován je unikátní key
    ))}
  </div>
);

V tomto příkladu:

• items je pole dat.
• map prochází pole.
• ItemComponent je vykreslen pro každý prvek.
• key={item.id} se používá k identifikaci každého prvku v seznamu.

Je důležité, aby každý prvek v seznamu měl unikátní key. To pomáhá Reactu efektivně aktualizovat DOM při změnách v poli. key by měl být unikátní identifikátor prvku (například ID z databáze), nikoli index v poli, zejména pokud se může měnit pořadí prvků.