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