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>;
}