Propsy komponentów w React

W poprzedniej lekcji wyświetliliśmy kilka instancji produktów:

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

Na razie każde wywołanie tagu z produktem wyświetla to samo. Zróbmy teraz tak, aby każdy produkt był unikalny.

Niech na przykład każdy produkt ma nazwę i cenę. Zróbmy tak, aby każde wywołanie tagu z produktem wyświetlało produkt ze swoją nazwą i ceną, sformatowanymi w odpowiedni dla nas kod HTML.

Aby to zrobić, musimy wykonać kilka kroków.

Na początek przy wywoływaniu tagu z produktem będziemy zapisywać w tym tagu dwa atrybuty: atrybut name z nazwą produktu i atrybut cost z ceną, w ten sposób:

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

Nazwy i wartości tych atrybutów będą trafiać w postaci obiektu do pierwszego parametru funkcji-konstruktora naszego komponentu Product:

jsxfunction Product(props) {
  console.log(props); // obiekt z kluczami name i cost
  
  return <p>
    product
  </p>;
}

Nazwa parametru może być dowolna, ale w React przyjęło się nazywać go props. Faktycznie to nie tylko nazwa parametru, ale ważna koncepcja React.

Istota tej koncepcji jest następująca: przy wywołaniu tagu komponentu w ten tag można zapisywać atrybuty z danymi. Te dane będą trafiać do propsów komponentu. Następnie komponent może używać tych danych, na przykład, do stworzenia odpowiedniego kodu HTML.

Zróbmy to:

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

Wygodniej i bardziej przyjęte jest nieużywanie obiektu props, ale natychmiastowe wykonanie destrukturyzacji propsów bezpośrednio w parametrach funkcji:

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