Props komponentů v Reactu

V předchozí lekci jsme zobrazili několik instancí produktů:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

Zatím každé volání tagu s produktem zobrazuje na obrazovce to samé. Nyní uděláme každý produkt unikátní.

Nechť má například každý produkt název a cenu. Udělejme to, aby každé volání tagu s produktem zobrazovalo produkt s vlastním názvem a cenou, naformátované do požadovaného HTML.

K tomu musíme provést několik kroků.

Nejprve při volání tagu s produktem do tohoto tagu zapíšeme dva atributy: atribut name s názvem produktu a atribut cost s cenou, takto:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

Názvy a hodnoty těchto atributů budou předány jako objekt do prvního parametru funkce-konstruktoru naší komponenty Product:

jsxfunction Product(props) {
  console.log(props); // objekt s klíči name a cost
  
  return <p>
    product
  </p>;
}

Název parametru může být jakýkoli, ale v Reactu je zvykem jej nazývat props. Ve skutečnosti to není jen název parametru, ale důležitá koncept Reactu.

Podstata této konceptu je následující: při volání tagu komponenty do tohoto tagu lze zapisovat atributy s daty. Tato data budou předána do props komponenty. Poté komponenta může tato data použít, například pro vytvoření požadovaného HTML.

Pojďme to udělat:

jsxfunction Product(props) {
  return <p>
    name: <span>{props.name}</span>,
    cost: <span>{props.cost}</span>
  </p>;
}

Pohodlněji a častěji se nepoužívá objekt props, ale rovna se provádí destrukturalizace props přímo v parametrech funkce:

jsxfunction Product({ name, cost }) {
  return <p>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </p>;
}