React හි දරු කොටස් වලට අවස්ථා යොමු කිරීම

අපට නිෂ්පාදන අරාවක් ලබා දී ඇතැයි සිතන්න:

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

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

තාක්ෂණික වශයෙන්, අපට හමු වන්නේ දෙමාපිය කොටසට දත්ත සහිත තත්වයක් ඇති අතර දරු කොටස් මෙම දත්ත props ලෙස ලබා ගනී ඒවා අපට අවශ්‍ය ආකාරයට ප්‍රදර්ශනය කරයි.

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