Пропсы кампанентаў у 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>;
}