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>
		атауы: <span>{props.name}</span>,
		бағасы: <span>{props.cost}</span>
	</p>;
}

props объектісін пайдаланбастан, бірден функция параметрлерінде пропстардың деструктуризациясын орындау ыңғайлырақ және ұнамдырақ:

function Product({ name, cost }) {
	return <p>
		атауы: <span>{name}</span>,
		бағасы: <span>{cost}</span>
	</p>;
}

Employee компонентін жасаңыз, ол қызметкердің деректерін экранға шығарады. Бұл деректер тегі, аты, әкесінің аты және жалақысы болсын. Бұл деректерді өзіңіз қалаған версткаға енгізіңіз. App компонентінде әртүрлі деректері бар үш қызметкерді шығарыңыз.