4. diel - Vlastnosti v React - Props

V minulej lekcii, Prvý React komponent - Hello World, sme si vytvorili prvý React komponent HelloWorld, ktorý do stránky vložil nadpis <h1>.

V dnešnom React tutoriále si vysvetlíme koncept vlastností props. Ukážeme si, ako sa vlastnosti zadávajú v HTML kóde pri vytváraní komponentu, načítajú v komponente a deštrukturalizujú . Naučíme sa tiež zadávať predvolenú hodnotu vlastností. Budeme pokračovať s naším projektom helloworld.

Vlastnosti v React

Na konfiguráciu a odovzdávanie dát do komponentov v React slúžia vlastnosti (properties). Vlastnosti React komponentom definujeme ako HTML atribúty v JSX kóde pri ich vytváraní.

Nastavenie vlastností

Náš pozdrav zatiaľ robí vždy to isté. Poďme ho upraviť tak, aby bolo možné nastaviť meno toho, koho bude zdraviť. Meno nastavíme práve cez React vlastnosť. Pomenujeme ju napr. name a v súbore App.jsx ju komponentu <HelloWorld> nastavíme jednoducho ako HTML atribút:

<HelloWorld name="William" />

Najväčšou pridanou hodnotou je teraz samozrejme to, že všetky pozdravy nebudú robiť to isté, keď v nich vlastnosť spracujeme a vypíšeme. Môžeme si rovno pod pozdrav vložiť ešte jeden, ktorý bude zdraviť niekoho iného. Celý kód súboru App.jsx bude teraz vyzerať takto:

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

function App() {
    return (
        <div>
            <HelloWorld name="William" />
            <HelloWorld name="Sophia" />
        </div>
    );
}

export default App;

Súbor uložíme.

Vlastnosťami odovzdávame ľubovoľné dáta z rodičovského komponentu (tu App) na potomkov (tu HelloWorld). Komponent nemôže zmeniť svoje vlastnosti, ale môže nastaviť vlastnosti svojim potomkom. Je to podobný princíp, ako keď odovzdávame parametre funkciám v JavaScripte. Pomocou vlastností obvykle ovplyvňujeme, čo/ako (sa) má komponent zobraziť.

Načítanie vlastností v komponente – objekt props

Presunieme sa do súboru komponentu HelloWorld.jsx. Aby sme mali k vlastnostiam komponentu prístup, pridáme si najprv do deklarácie funkcie HelloWorld() parameter props:

function HelloWorld(props) {

Všetky vlastnosti zadané do HTML atribútov na mieste vytvárania komponentu máme teraz vo vnútri komponentu k dispozícii ako vlastnosti objektu props. Poďme meno vypísať ako časť pozdravu. Kompletný kód komponentu bude teraz nasledujúci:

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

export default HelloWorld;

Vlastnosť sme si pre prehľadnosť najprv uložili do samostatnej konštanty. Ak by mal HTML kód komponentu 100 riadkov, určite by sme uvítali, že sú všetky potrebné vlastnosti takto deklarované hneď na začiatku.

Výrazy do JSX kódu vkladáme pomocou zložených zátvoriek {}. Súbor uložíme.

Možno vám napadlo, že z hľadiska OOP ide v komponente o podobný princíp, ako obstaráva konštruktor.

Keď sa teraz pozrieme na stránku v prehliadači, vidíme, že sú tu komponenty s pozdravom naozaj dva a vypisujú pozdrav podľa hodnoty vo vlastnosti name:

Aplikácia s viacerými vlastnosťami

V App.jsx pridáme obom komponentom <HelloWorld> ešte vlastnosť text, ktorá umožní meniť text pozdravu:

<HelloWorld text="Hi" name="William" />
<HelloWorld text="Hello" name="Sophia" />

Následne sa presunieme do HelloWorld.jsx, kde túto vlastnosť vypíšeme ako text pozdravu:

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

export default HelloWorld;

Aplikácia teraz vyzerá takto:

Deštrukturalizácia React vlastností

Keď je vlastností väčšie množstvo, zaberie ich preuloženie z objektu props do konštánt niekoľko riadkov kódu. Preto si ich môžeme nechať "vybaliť" automaticky pomocou tzv. deštrukturalizácie objektov, ktorú JavaScript podporuje:

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

export default HelloWorld;

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

• na ľavej strane definujeme všetky konštanty na vybalenie v zložených zátvorkách {} a
• na pravej strane nastavujeme objekt, z ktorého sa majú vlastnosti s týmito názvami "vybaliť".

Aplikácia teraz funguje úplne rovnako, všetky vlastnosti sme však získali ako samostatné konštanty na jednom riadku.

Deštrukturalizácia parametra

Pokiaľ vlastností nie je veľa, môžeme ich vybaliť priamo v parametri funkcie a kód ešte skrátiť:

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

export default HelloWorld;

K objektu props v tomto prípade vôbec nepotrebujeme pristupovať. Tento zápis budeme preferovať, ak nebude vlastností veľké množstvo (riadok by bol potom veľmi dlhý).

Predvolené hodnoty vlastností

Vďaka tomuto zápisu môžeme tiež veľmi jednoducho nastaviť predvolené hodnoty vlastností pre prípad, že v HTML kóde nebudú zadané. Prejdime do App.jsx a vlastnosť text nastavme len jednému komponentu:

<HelloWorld name="William" />
<HelloWorld text="Hello" name="Sophia" />

Následne v HelloWorld.jsx nastavíme predvolenú hodnotu vlastnosti text na "Hi":

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

export default HelloWorld;

Výsledok je stále rovnaký, pre vlastnosť text sa v prípade prvého komponentu použila zadaná východisková hodnota:

Týmto máme náš projekt helloworld hotový a nabudúce začneme zas tvoriť niečo nové.

Ak si budete sťahovať hotový projekt z prílohy, majte na pamäti, že je potrebné v jeho priečinku najprv spustiť príkaz npm install pre stiahnutie potrebných nástrojov. Až potom ho možno spustiť pomocou npm run dev.

V budúcej lekcii, Stavy v React a hook useState(), sa naučíme obsluhovať stavy našej aplikácie, objavíme React hooks a naučíme sa pracovať s useState().

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.