Lekce 4 - Vlastnosti v React - Props

V minulé lekci, První React komponenta - Hello World, jsme si vytvořili první React komponentu HelloWorld, která do stránky vložila nadpis <h1>.

V dnešním React tutoriálu si vysvětlíme koncept vlastností props. Ukážeme si, jak se vlastnosti zadávají v HTML kódu při vytváření komponenty, načítají v komponentě a destrukturali­zují. Naučíme se také zadávat výchozí hodnotu vlastností. Budeme pokračovat s naším projektem helloworld.

Vlastnosti v React

Pro konfiguraci a předávání dat do komponent v React slouží vlastnosti (properties). Vlastnosti React komponentám definujeme jako HTML atributy v JSX kódu při jejich vytváření.

Nastavení vlastností

Náš pozdrav zatím dělá vždy to samé. Pojďme jej upravit tak, aby bylo možné nastavit jméno toho, koho bude zdravit. Jméno nastavíme právě přes React vlastnost. Pojmenujeme ji např. name a v souboru App.jsx ji komponentě <HelloWorld> nastavíme jednoduše jako HTML atribut:

<HelloWorld name="Karle" />

Největší přidanou hodnotou je nyní samozřejmě to, že všechny pozdravy nebudou dělat to samé, až v nich vlastnost zpracujeme a vypíšeme. Můžeme si rovnou pod pozdrav vložit ještě jeden, který bude zdravit někoho jiného. Celý kód souboru App.jsx bude nyní vypadat takto:

import './App.css';
import HelloWorld from './HelloWorld.jsx';

function App() {
    return (
        <div>
            <HelloWorld name="Karle" />
            <HelloWorld name="Kláro" />
        </div>
    );
}

export default App;

Soubor uložíme.

Vlastnostmi předáváme libovolná data z rodičovské komponenty (zde App) na potomky (zde HelloWorld). Komponenta nemůže změnit své vlastnosti, ale může nastavit vlastnosti svým potomkům. Je to podobný princip, jako když předáváme parametry funkcím v JavaScriptu. Pomocí vlastností obvykle ovlivňujeme, co/jak (se) má komponenta zobrazit.

Načtení vlastností v komponentě – objekt props

Přesuneme se do souboru komponenty HelloWorld.jsx. Abychom měli k vlastnostem komponenty přístup, přidáme si prvně do deklarace funkce HelloWorld() parametr props:

function HelloWorld(props) {

Veškeré vlastnosti zadané do HTML atributů na místě vytváření komponenty máme nyní uvnitř komponenty k dispozici jako vlastnosti objektu props. Pojďme jméno vypsat jako část pozdravu. Kompletní kód komponenty bude nyní následující:

function HelloWorld(props) {
    const name = props.name;
    return <h1>Ahoj {name}!</h1>
}

export default HelloWorld;

Vlastnost jsme si pro přehlednost prvně uložili do samostatné konstanty. Kdyby měl HTML kód komponenty 100 řádků, určitě bychom uvítali, že jsou všechny potřebné vlastnosti takto deklarované hned na začátku.

Výrazy do JSX kódu vkládáme pomocí složených závorek {}. Soubor uložíme.

Možná vás napadlo, že z hlediska OOP jde v komponentě o podobný princip, jako obstarává konstruktor.

Když se nyní podíváme na stránku v prohlížeči, vidíme, že jsou zde komponenty s pozdravem opravdu dvě a vypisují pozdrav podle hodnoty ve vlastnosti name:

Aplikace s více vlastnostmi

V App.jsx přidáme oběma komponentám <HelloWorld> ještě vlastnost text, která umožní měnit text pozdravu:

<HelloWorld text="Ahoj" name="Karle" />
<HelloWorld text="Dobrý den" name="Kláro" />

Následně se přesuneme do HelloWorld.jsx, kde tuto vlastnost vypíšeme jakožto text pozdravu:

function HelloWorld(props) {
    const text = props.text;
    const name = props.name;
    return <h1>{text} {name}!</h1>
}

export default HelloWorld;

Aplikace nyní vypadá takto:

Destrukturalizace React vlastností

Když je vlastností větší množství, zabere jejich přeuložení z objektu props do konstant několik řádků kódu. Proto si je můžeme nechat "vybalit" automaticky pomocí tzv. destrukturalizace objektů, kterou JavaScript podporuje:

function HelloWorld(props) {
    const { text, name } = props;
    return <h1>{text} {name}!</h1>
}

export default HelloWorld;

Do kódu jsme vložili výraz, kde:

• na levé straně definujeme všechny konstanty k vybalení ve složených závorkách {} a
• na straně pravé nastavujeme objekt, zde kterého se mají vlastnosti s těmito názvy "vybalit".

Aplikace nyní funguje úplně stejně, všechny vlastnosti jsme však získali jako samostatné konstanty na jediném řádku.

Destrukturalizace parametru

Pokud vlastností není moc, můžeme je vybalit přímo v parametru funkce a kód ještě zkrátit:

function HelloWorld({ text, name }) {
    return <h1>{text} {name}!</h1>
}

export default HelloWorld;

K objektu props v tomto případě vůbec nepotřebujeme přistupovat. Tento zápis budeme preferovat, pokud nebude vlastností velké množství (řádek by byl pak moc dlouhý).

Výchozí hodnoty vlastností

Díky tomuto zápisu můžeme také velmi jednoduše nastavit výchozí hodnoty vlastností pro případ, že v HTML kódu nebudou zadané. Přejděme do App.jsx a vlastnost text nastavme jen jedné komponentě:

<HelloWorld name="Karle" />
<HelloWorld text="Dobrý den" name="Kláro" />

Následně v HelloWorld.jsx nastavíme výchozí hodnotu vlastnosti text na "Ahoj":

function HelloWorld({ text = "Ahoj", name }) {
    return <h1>{text} {name}!</h1>
}

export default HelloWorld;

Výsledek je stále stejný, pro vlastnost text se v případě první komponenty použila zadaná výchozí hodnota:

Tímto máme náš projekt helloworld hotový a příště začneme zas tvořit něco nového.

Pokud si budete stahovat hotový projekt z přílohy, mějte na paměti, že je potřeba v jeho složce spustit prvně příkaz npm install pro stažení potřebných nástrojů. Až poté jej lze spustit pomocí npm run dev.

V příští lekci, Stavy v Reactu a hook useState(), se naučíme obsluhovat stavy naší aplikace, objevíme React hooks a naučíme se pracovat s useState().

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.