Props czyli atrybuty w React.js

Projekt

Zacznijmy od zaprojektowania kodu takiego modala. Będzie to dosłownie kilka prostych linii HTML:

<div>
  <dialog open>
    <h1>Tytuł</h1>
    <p>Treść</p>
  </dialog>
</div>

Nic skomplikowanego. dialog to element wbudowany w HTML5. Następnie zamieniamy taki kod na komponent, czyli tworzymy funkcję, która zwraca JSX:

function MojKomponent() {
  return (
    <div>
      <dialog open>
        <h1>Tytuł</h1>
        <p>Treść</p>
      </dialog>
    </div>
  );
}

Tym sposobem Twoim oczom powinien się ukazać taki oto piękny efekt:

Props w React.js

Niestety teraz aby zmienić tekst, musimy edytować kod samego komponentu, a to jest mało praktyczne. Czy można jakoś sparametryzować to co wyświetla komponent? Tak! Używając tzw. propsów :)

Do tej pory komponentu używaliśmy w taki sposób: <MojKomponent />. Czyli jest to tak jakby element. A czy możemy dodać tutaj jakieś atrybuty? Właśnie tak! To dokładnie będą nasze propsy. Props to atrybut. Podajmy więc tytuł i treść: <MojKomponent title="Tytuł" content="Treść" />. Czy to już? Niestety nie. Teraz musimy jeszcze jakoś się odwołać do tych propsów i wyświetlić.

Propsy to argumenty

Propsy do komponentów przekazywane są po prostu jako argumenty. A konkretnie: Jeden argument, który jest obiektem. Czy mogłoby być prościej? Chyba nie :) Funkcja przybiera taką postać:

function MojKomponent({ title, content }) { … }

Wyświetlanie

Jak teraz wyświetlić zawartość takiej zmiennej w JSX? Jest to również bardzo proste. Wystarczy skorzystać ze składni {nazwa} — i to wszystko!

Ostatecznie otrzymujemy taki kod:

function MojKomponent({ title, content }) {
  return (
    <div>
      <dialog open>
        <h1>{title}</h1>
        <p>{content}</p>
      </dialog>
    </div>
  );
}

Ostateczny efekt

Teraz już nie pozostaje nic innego jak wyrenderować ten komponent. Podobnie jak dotychczas:

ReactDOM.render(
  <MojKomponent
    title="I co, duma?"
    content="To było prostsze niż by się mogło wydawać, prawda?"
  />,
  document.getElementById("app")
);

Domyślne propsy

Co się wydarzy gdy nie podasz jakiegoś propsa i spróbujesz go wyświetlić? Na szczęście nic złego. Zostanie potraktowany jak pusty string "" i nic się nie pokaże. Lepsze to niż wyświetlenie użytkownikom np. undefined, prawda? :) Ale na pewno nie idealne! Właśnie dlatego możemy podać domyślne propsy.

Najprościej możesz to zrobić korzystając ze składni ES2015, z której już i tak korzystamy :) Do argumentów można dopisać domyślne wartości. Po znaku = po prostu podajemy stringa, który ma się wyświetlić gdy danego atrybutu na komponencie nie ma:

function MojKomponent({ title = "Modal", content }) { // tutaj podajemy domyślne propsy
  return (
    <div>
      <dialog open>
        <h1>{title}</h1>
        <p>{content}</p>
      </dialog>
    </div>
  );
}

Teraz przy próbie wyrenderowania <MojKomponent /> zamiast tytułu pokaże się napis "Modal", a w miejsce treści nie pokaże się nic (pusty element <p>).

Demo

Zobacz Codepen Props czyli atrybuty w React.js.

Co dalej?

zapisz się na szkolenie z React.

W kolejnej części nauczysz się jak dzielić aplikację na komponenty. Rozpoczniesz też budowę „prawdziwej” aplikacji! Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Ćwiczenie: Zrób eksperyment z propsami. Spróbuj przekazać zamiast stringa kolejno: liczbę, obiekt, tablicę i funkcję. Co można z nimi zrobić? Czy da się przekazać tam HTML? Napisz w komentarzu!