კომპონენტების პროპსები 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 სამი თანამშრომელი სხვადასხვა მონაცემებით.