Överföring av tillstånd till underordnade komponenter i React

Låt oss säga att vi har en array med produkter:

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

Låt oss säga att denna array finns i komponenten Products. Låt oss sätta dessa produkter i komponentens tillstånd:

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

Låt oss nu iterera över produkterna med en loop och visa dem i någon form av markup:

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

Som du kan se är innehållet i vår map-loop ganska komplext, speciellt om produktens markup kommer att växa i framtiden. Sådan komplexitet försvårar läsbarhet, förståelse och underhåll av koden.

Det vore bättre att flytta koden som ansvarar för visningen av produkten till en separat komponent. Låt oss kalla den Product. Här är koden för vår komponent:

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

Låt oss nu inuti komponenten Products i map-loopen använda underordnade komponenter 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 har loopkoden förenklats och blivit mer förståelig. Dessutom ansvarar nu en separat komponent för visningen av produkten, där vi kan skapa och sedan redigera produktens markup.

Tekniskt sett har vi fått så att den överordnade komponenten har ett tillstånd med data, medan de underordnade komponenterna tar emot dessa data som props och visar dem på det sätt vi vill.

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},
];