Props czyli atrybuty w React.js

Ten wpis jest 4 częścią z 25 w kursie React.js

W tej części nauczysz się parametryzować komponenty w React.js. Poznasz pojęcie „props” oraz dowiesz się do czego one (te „propsy”) służą.

To co zrobiliśmy do tej pory było spoko, ale przecież nie będziesz tworzyć nowego komponentu zawsze gdy będziesz chciał(a) wyświetlić inny tekst w aplikacji, prawda? Wyobraź sobie, że masz do zaprojektowania popup, w którym będzie wyświetlony tytuł oraz tekst. Za moment to zaimplementujemy!

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:

Kurs React.js – komponent bez props

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

See the Pen Props czyli atrybuty w React.js by Michał Miszczyszyn (@mmiszy) on CodePen.

Co dalej?

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!