React හි සංරචකවල ප්රොප්ස්
පෙර පාඩමේදී අපි නිෂ්පාදන කිහිපයක් නිදර්ශනය කළෙමු:
function App() {
return <div>
<Product />
<Product />
<Product />
</div>;
}
දැනට, නිෂ්පාදන ටැගය ඇමතුම් සෑම එකක්ම තිරයේ එකම දෙය පෙන්වයි. දැන් අපි සෑම නිෂ්පාදනයක්ම අනන්ය කරමු.
උදාහරණයක් ලෙස, සෑම නිෂ්පාදනයකටම නමක් සහ මිලක් තිබිය යුතුයි. නිෂ්පාදනය සමඟ ඇති ටැගයේ සෑම ඇමතුමක්ම තමන්ගේම නම සහ මිල සහිත නිෂ්පාදනයක් පෙන්වන පරිදි, අවශ්ය HTML ව්යුහයට සකස් කරමු.
මෙය සිදු කිරීම සඳහා අපි පියවර කිහිපයක් කරන්න අවශ්යයි.
පළමුව, නිෂ්පාදන ටැගය ඇමතන විට අපි
එම ටැගය තුළ ගුණාංග දෙකක් ලියන්නෙමු: නිෂ්පාදන නම සමඟ ගුණාංගය
name සහ මිල සමඟ ගුණාංගය
cost, මෙසේ:
function App() {
return <div>
<Product name="product1" cost="100" />
<Product name="product2" cost="200" />
<Product name="product3" cost="300" />
</div>;
}
මෙම ගුණාංගවල නම් සහ අගයන්
අපගේ සංරචක ශ්රිත-කාරකයේ පළමු පරාමිතියට
වස්තුවක් ලෙස පැමිණේ
Product:
function Product(props) {
console.log(props); // name සහ cost යන යතුරු සහිත වස්තුව
return <p>
product
</p>;
}
පරාමිතියේ නම ඕනෑම ආකාරයක් විය හැකි නමුත්
React හි එය props ලෙස නම් කිරීම සිරිතකි.
ඇත්ත වශයෙන්ම මෙය පරාමිතියක නමකට වඩා
React හි වැදගත් සංකල්පයකි.
මෙම සංකල්පයේ සාරය පහත පරිදි වේ: සංරචක ටැගයක් ඇමතන විට දත්ත සහිත ගුණාංග එම ටැගයට ලිවිය හැකිය. මෙම දත්ත සංරචකයේ ප්රොප්ස් වලට පැමිණේ. පසුව සංරචකය මෙම දත්ත භාවිතා කළ හැකිය, උදාහරණයක් ලෙස, අවශ්ය HTML ව්යුහයක් සෑදීම සඳහා.
අපි මෙය කරමු:
function Product(props) {
return <p>
name: <span>{props.name}</span>,
cost: <span>{props.cost}</span>
</p>;
}
වඩාත් පහසු සහ සාම්ප්රදායික ආකාරය නම්
props වස්තුව භාවිතා නොකර, වහාම ව්යක්ත කිරීම
ශ්රිතයේ පරාමිතීන් තුළම ප්රොප්ස් සිදු කිරීමයි:
function Product({ name, cost }) {
return <p>
name: <span>{name}</span>,
cost: <span>{cost}</span>
</p>;
}
Employee සංරචකයක් සාදන්න, එය තිරයේ
කාර්ය මණ්ඩල සාමාජිකයෙකුගේ දත්ත පෙන්වයි.
මෙම දත්ත විය යුත්තේ අන්ත නම, පළමු නම, පියාගේ නම සහ වැටුප වේ.
මෙම දත්ත ඔබට අවශ්ය HTML ව්යුහයට සකස් කරන්න.
App සංරචකය තුළ විවිධ දත්ත සහිත කාර්ය මණ්ඩල සාමාජිකයින් තිදෙනෙකු
පෙන්වන්න.
