მშობელი კომპონენტის სტეიტის ცვლილება შვილობილ კომპონენტში React-ში

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

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

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

Products კომპონენტში პროდუქტის ტეგს დავუმატოთ კიდევ ერთი ატრიბუტი inCart:

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

მოდით შვილობილ Product კომპონენტში გავაკეთოთ ინფორმაციის გამოტანა კალათის შესახებ და ღილაკი კალათაში დასამატებლად:

jsxfunction Product({ id, name, cost, inCart }) {
  return <div>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>,
    <span>{inCart ? 'in cart' : 'not in cart'}</span>
    <button>to cart</button>
  </div>;
}

დავამატოთ რეალიზაცია

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

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

მოდით ვნახოთ, როგორ კეთდება ეს.

მშობელ კომპონენტში შევქმნათ ფუნქცია addToCart, რომელიც პარამეტრად იღებს პროდუქტის id-ს და ამ პროდუქტისთვის ცვლის inCart თვისებას true-ზე:

jsxfunction addToCart(id) {
  setProds(prods.map(prod => {
    if (prod.id === id) {
      prod.inCart = true;
    }
    
    return prod;
  }));
}

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

jsxconst items = prods.map(prod => {
  return <Product
    key      ={prod.id}
    id       ={prod.id}
    name     ={prod.name}
    cost     ={prod.cost}
    inCart   ={prod.inCart}
    addToCart={addToCart}
  />;
});

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

Products კლასის საბოლოო კოდი მიიღებს შემდეგ სახეს:

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

ახლა შვილობილ კლასში ჩვენ გვექნება ხელმისაწვდომი ფუნქცია addToCart. გამოვიძახოთ ეს ფუნქცია ღილაკზე დაწკაპუნებისას, მისთვის პარამეტრად გადავცეთ პროდუქტის id-სი:

jsxfunction Product({ id, name, cost, inCart, addToCart }) {
  return <div>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>,
    <span>{inCart ? 'in cart' : 'not in cart'}</span>
    <button onClick={() => addToCart(id)}>to cart</button>
  </div>;
}

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