კომპონენტების პროპსები React-ში

წინა გაკვეთილში ჩვენ გამოვიტანეთ რამდენიმე პროდუქტის ეგზემპლარი:

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

ჯერჯერობით პროდუქტის თეგის ყოველი გამოძახება ამოსახავს ეკრანზე ერთსა და იმავეს. მოდით ახლა გავხადოთ თითოეული პროდუქტი უნიკალური.

მაგალითად, დავუშვათ, რომ თითოეულ პროდუქტს უნდა ჰქონდეს სახელი და ფასი. მოდით, გავაკეთოთ ისე, რომ პროდუქტის თეგის ყოველი გამოძახება ამოსახავდეს პროდუქტს საკუთარი სახელითა და ფასით, ჩვენთვის საჭირო ვერსტკაში ფორმატირებულს.

ამისთვის ჩვენ გვჭირდება რამდენიმე ნაბიჯის გადადგმა.

დასაწყისისთვის, პროდუქტის თეგის გამოძახებისას ამ თეგში ჩავწერთ ორ ატრიბუტს: ატრიბუტს name პროდუქტის სახელით და ატრიბუტს cost ფასით, აი ასე:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

ამ ატრიბუტების სახელები და მნიშვნელობები მოხვდება ობიექტის სახით ჩვენი კომპონენტის Product ფუნქცია-კონსტრუქტორის პირველ პარამეტრში:

jsxfunction Product(props) {
  console.log(props); // ობიექტი name და cost გასაღებებით
  
  return <p>
    product
  </p>;
}

პარამეტრის სახელი შეიძლება იყოს ნებისმიერი, მაგრამ React-ში მიღებულია მისი დასახელება props. სინამდვილეში ეს მხოლოდ პარამეტრის სახელი კი არ არის, არამედ React-ის მნიშვნელოვანი კონცეფცია.

ამ კონცეფციის არსი შემდეგია: კომპონენტის თეგის გამოძახებისას ამ თეგში შეიძლება ჩაიწეროს მონაცემების მქონე ატრიბუტები. ეს მონაცემები მოხვდება კომპონენტის პროპსებში. შემდეგ კომპონენტს შეუძლია გამოიყენოს ეს მონაცემები, მაგალითად, საჭირო ვერსტკის შესაქმნელად.

მოდით, გავაკეთოთ ეს:

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

უფრო მოსახერხებელი და უფრო მიღებულია არა props ობიექტის გამოყენება, არამედ პირდაპირ დესტრუქტურიზაციის შესრულება პროპსების ფუნქციის პარამეტრებში:

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