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

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

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

මෙම අරාව Products කොටසේ පිහිටා ඇතැයි සිතන්න. මෙම නිෂ්පාදන කොටසේ තත්වයට ලියන්න:

function Products() {
	const [prods, setProds] = useState(initProds);
}

දැන් අපි නිෂ්පාදන ලූපයකින් ගමන් කර ඒවා යම් වින්‍යාසයකින් ප්‍රදර්ශනය කරමු:

function 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. මෙන්න අපගේ කොටසේ කේතය:

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

දැන් අපි Products කොටස තුළ map ලූපය තුළ දරු කොටස් Product භාවිතා කරමු:

function 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 ලෙස ලබා ගනී ඒවා අපට අවශ්‍ය ආකාරයට ප්‍රදර්ශනය කරයි.

Users කොටසේ තත්වයේ පහත අරාව ලබා දී ඇත:

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

මෙම අරාව ලූපයකින් ගමන් කර සියලුම පරිශීලකයින් තිරය මත ප්‍රදර්ශනය කරන්න. ප්‍රදර්ශනය සඳහා පරිශීලකයා වෙනම කොටසක් User සාදන්න.