Props to dane przekazywane do komponentu React z komponentu nadrzędnego. Są podobne do argumentów funkcji: komponent otrzymuje wartości i na ich podstawie generuje widok.
Przykład
function Heading(props) {
return <h1>{props.title}</h1>;
}
return <Heading title="Egzamin zawodowy" />;
W tym przykładzie komponent Heading otrzymuje właściwość title o wartości "Egzamin zawodowy". Następnie odczytuje ją przez props.title i umieszcza wewnątrz znacznika <h1>.
Efekt w przeglądarce:
<h1>Egzamin zawodowy</h1>
Oznacza to, że tekst zostanie wyświetlony jako nagłówek pierwszego poziomu, a nie jako akapit, tytuł strony ani atrybut title elementu HTML.
Ważne cechy props
- props są przekazywane z zewnątrz do komponentu,
- w komponentach funkcyjnych są dostępne jako parametr funkcji,
- zwykle traktuje się je jako dane tylko do odczytu,
- mogą przechowywać tekst, liczby, obiekty, tablice, funkcje lub inne komponenty.
Częsty błąd egzaminacyjny
Zapis:
<Heading title="Egzamin zawodowy" />
nie ustawia tytułu strony. Tworzy komponent Heading i przekazuje mu props o nazwie title. Dopiero kod komponentu decyduje, co z tą wartością zrobi.