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