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

Ինչպես տեսնում եք, այժմ ցիկլի կոդը պարզեցվել է ու դարձել է ավելի հասկանալի: Ի հավելումն այդ, այժմ ապրանքի ցուցադրման համար պատասխանատու է առանձին կոմպոնենտ, որտեղ մենք կարող ենք անել, ապա խմբագրել ապրանքների վերստը:

Տեխնիկապես ստացվում է, որ ծնող կոմպոնենտն ունի տվյալների ստեյթ, իսկ դուստր կոմպոնենտները ստանում են այդ տվյալները պրոփսերի տեսքով ու ցուցադրում դրանք մեզ անհրաժեշտ կերպով:

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: