React හි id හරහා අනන්ය යතුරු
ඉහත කේතයේ, key ගුණාංගයට
අපි අරාවේ මූලද්රව්යයේ අනුක්රමික අංකය
එකතු කලෙමු. ඇත්තටම, මෙවැනි පිළිවෙත නරක
එකක් වන අතර අන්ත අවස්ථාවකදී පමණක් භාවිතා කළ යුතුය.
හේතුව නම්, අරාවක් වර්ග කිරීමේදී මූලද්රව්යවලට වෙනත් යතුරු ලැබෙන අතර Reactට අරාවේ මූලද්රව්ය සහ අදාල ටැග් අතර සම්බන්ධය නිවැරදිව ලුහුබැඳීමට නොහැකි වනු ඇත.
වඩා හොඳ පිළිවෙතක් වනුයේ සෑම නිෂ්පාදනයකටම අනන්ය අනන්යතා හඳුන්වනයක් එක් කිරීමයි, එය යතුරක් ලෙස භාවිතා කරනු ඇත.
අපගේ අරාවේ සෑම නිෂ්පාදනයකටම
id ගුණාංගයක් එකතු කරමු
අපගේ නිෂ්පාදන අංකය සමග:
const prods = [
{id: 1, name: 'product1', cost: 100},
{id: 2, name: 'product2', cost: 200},
{id: 3, name: 'product3', cost: 300},
];
දැන් යතුරක් ලෙස මෙම id භාවිතා කරමු:
function App() {
const res = prods.map(function(item) {
return <p key={item.id}>
<span>{item.name}</span>:
<span>{item.cost}</span>
</p>;
});
return <div>
{res}
</div>;
}
පෙර කාර්යය වෙනස් කරන්න,
අරාවට id එකතු කර
key ගුණාංගයේ අගයන් ලෙස ඒවා භාවිතා කරමින්.
