რეაქტში სტეიტების შვილ კომპონენტებში გადაცემა

დავუშვათ, გვაქვს მოცემული პროდუქტების მასივი:

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

დავუშვათ, ეს მასივი მდებარეობს კომპონენტში Products. ჩავწეროთ ეს პროდუქტები კომპონენტის სტეიტში:

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

ახლა მოდით გადავუყვეთ პროდუქტებს ციკლით და გამოვსახოთ ისინი რაიმე ვერსტკაში:

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

როგორც ხედავთ, ჩვენი ციკლის map შიგთავსი საკმაოდ რთულია, განსაკუთრებით თუ პროდუქტის ვერსტკა შემდგომში გაიზრდება. ასეთი სირთულე ართულებს კოდის წაკითხვას, გაგებას და მოვლას.

უკეთესი იქნება პროდუქტის ჩვენებისთვის პასუხისმგებელი კოდი გამოვყოთ ცალკე კომპონენტში. დავარქვათ მას Product. აქ არის ჩვენი კომპონენტის კოდი:

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

მოდით ახლა კომპონენტის Products შიგნით ციკლში map გამოვიყენოთ შვილობილი კომპონენტები 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>;
}

როგორც ხედავთ, ახლა ციკლის კოდი გამარტივდა და გახდა უფრო გასაგები. გარდა ამისა, ახლა პროდუქტის ჩვენებისთვის პასუხისმგებელია ცალკე კომპონენტი, რომელშიც ჩვენ შეგვიძლია გავაკეთოთ, შემდეგ კი შევცვალოთ პროდუქტების ვერსტკა.

ტექნიკურად, ჩვენ გვაქვს ის, რომ მშობელ კომპონენტს აქვს სტეიტი მონაცემებით, ხოლო შვილობილ კომპონენტები იღებენ ამ მონაცემებს პროფების სახით და გამოსახავენ მათ ჩვენთვის სასურველი ფორმით.

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