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>
		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 կոմպոնենտը, որն արտածում է աշխատողի տվյալները էկրանին: Թող այդ տվյալները լինեն ազգանուն, անուն, հայրանուն և աշխատավարձ: Ձևավորեք այդ տվյալները ձեզ անհրաժեշտ վերստքի մեջ: Արտածեք App կոմպոնենտում երեք աշխատող տարբեր տվյալներով: