React හි සංරචකවල ප්‍රොප්ස්

පෙර පාඩමේදී අපි නිෂ්පාදන කිහිපයක් නිදර්ශනය කළෙමු:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

දැනට, නිෂ්පාදන ටැගය ඇමතුම් සෑම එකක්ම තිරයේ එකම දෙය පෙන්වයි. දැන් අපි සෑම නිෂ්පාදනයක්ම අනන්‍ය කරමු.

උදාහරණයක් ලෙස, සෑම නිෂ්පාදනයකටම නමක් සහ මිලක් තිබිය යුතුයි. නිෂ්පාදනය සමඟ ඇති ටැගයේ සෑම ඇමතුමක්ම තමන්ගේම නම සහ මිල සහිත නිෂ්පාදනයක් පෙන්වන පරිදි, අවශ්‍ය HTML ව්‍යුහයට සකස් කරමු.

මෙය සිදු කිරීම සඳහා අපි පියවර කිහිපයක් කරන්න අවශ්‍යයි.

පළමුව, නිෂ්පාදන ටැගය ඇමතන විට අපි එම ටැගය තුළ ගුණාංග දෙකක් ලියන්නෙමු: නිෂ්පාදන නම සමඟ ගුණාංගය name සහ මිල සමඟ ගුණාංගය cost, මෙසේ:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

මෙම ගුණාංගවල නම් සහ අගයන් අපගේ සංරචක ශ්‍රිත-කාරකයේ පළමු පරාමිතියට වස්තුවක් ලෙස පැමිණේ Product:

jsxfunction Product(props) {
  console.log(props); // name සහ cost යන යතුරු සහිත වස්තුව
  
  return <p>
    product
  </p>;
}

පරාමිතියේ නම ඕනෑම ආකාරයක් විය හැකි නමුත් React හි එය props ලෙස නම් කිරීම සිරිතකි. ඇත්ත වශයෙන්ම මෙය පරාමිතියක නමකට වඩා React හි වැදගත් සංකල්පයකි.

මෙම සංකල්පයේ සාරය පහත පරිදි වේ: සංරචක ටැගයක් ඇමතන විට දත්ත සහිත ගුණාංග එම ටැගයට ලිවිය හැකිය. මෙම දත්ත සංරචකයේ ප්‍රොප්ස් වලට පැමිණේ. පසුව සංරචකය මෙම දත්ත භාවිතා කළ හැකිය, උදාහරණයක් ලෙස, අවශ්‍ය HTML ව්‍යුහයක් සෑදීම සඳහා.

අපි මෙය කරමු:

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

වඩාත් පහසු සහ සාම්ප්‍රදායික ආකාරය නම් props වස්තුව භාවිතා නොකර, වහාම ව්‍යක්ත කිරීම ශ්‍රිතයේ පරාමිතීන් තුළම ප්‍රොප්ස් සිදු කිරීමයි:

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