Overførsel af tilstande til underkomponenter i React

Lad os sige, at vi har en række med produkter:

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

Lad os sige, at denne række er placeret i komponenten Products. Lad os gemme disse produkter i komponentens tilstand:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

Lad os nu gennemgå produkterne i en løkke og udskrive dem i et eller andet layout:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      navn: <span>{prod.name}</span>,
      pris: <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

Som du kan se, er indholdet af vores map-løkke ret komplekst, især hvis produktlayoutet vokser sig større senere. Sådan en kompleksitet gør det sværere at læse, forstå og vedligeholde koden.

Det ville være bedre at flytte koden, der står for visningen af produktet, til en separat komponent. Lad os kalde den Product. Her er koden til vores komponent:

jsxfunction Product({ name, cost }) {
  return <div>
    navn: <span>{name}</span>,
    pris: <span>{cost}</span>
  </div>;
}

Lad os nu inde i komponenten Products i map-løkken bruge underkomponenterne Product:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

Som du kan se, er løkkekoden nu blevet forenklet og er blevet mere forståelig. Derudover står en separat komponent nu for visningen af produktet, hvor vi kan lave og derefter redigere produktlayoutet.

Teknisk set har vi, at den overordnede komponent har en tilstand med data, og de underordnede komponenter modtager disse data i form af props og viser dem på den måde, vi har brug for.

jsxconst initUsers = [
  {id: id(), name: 'user1', surname: 'surn1', age: 30},
  {id: id(), name: 'user2', surname: 'surn2', age: 31},
  {id: id(), name: 'user3', surname: 'surn3', age: 32},
];