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