Reactда компонентларнинг пропслари

Олдинги дарслиқда биз бир неча маҳсулот инстантларини чиқардик:

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

Ҳозирча ҳар бир маҳсулот теги чақириғи экранда бир хил нарсани чиқармоқда. Келингиз энди ҳар бир маҳсулотни ўзига хос қилайлик.

Масалан, ҳар бир маҳсулот ном ва нархга эга бўлсин. Келингиз, ҳар бир маҳсулот теги чақириғи ўзига тегишли ном ва нархга эга бўлган маҳсулотни чиқарсин, биз хохлаган версткада тартибга солинсин.

Бунинг учун бизга бир неча қадамларни бажариш зарур.

Бошлаш учун, маҳсулот тегини чақирганда, биз ушбу тегга икки атрибут ёзамиз: маҳсулот номи учун 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 нинг мухим концепциясидир.

Ушбу концепциянинг мўҳимаги шундаки: компонент тегини чақирганда ушбу тегга маълумотлар билан атрибутлар ёзиш мумкин. Бу маълумотлар компонентнинг пропслари га түшади. Сўнгра компонент бу маълумотлардан фойдаланиши мумкин, масалан, керакли версткани яратиш учун.

Келингиз буни амалга оширамиз:

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

Илдирокли ва оддийроқ усул - props объектидан фойдаланмаслик, балки дастурда функция параметрларида деструктуризација ни бажариш:

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

Ходим маълумотларини экранга чиқарувчи Employee компонентини яратинг. Бу маълумотлар фамилия, исм, шариф ва маош бўлсин. Бу маълумотларни ўзингиз хохлаган версткада тартибга солаверинг. App компонентида турли маълумотларга эга бўлган учта ходимни чиқаринг.