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

එවිට, දරු සංරචකයේ බොත්තම ක්ලික් කිරීමෙන් දෙමාපිය ශ්‍රිතය ක්‍රියාත්මක වන අතර, එය දෙමාපිය තත්වය වෙනස් කරයි. දෙමාපිය තත්වය වෙනස් වීම නැවත පිළි rendering කිරීම සහ නැවත ඇඳීම ක්‍රියාත්මක කරවන අතර, අපගේ නිෂ්පාදනය වෙනස් වූ ප්‍රොප්ස් සමඟ සම්ප්‍රේෂණය කරයි.