6

Komunikace dítě rodič

Představíme si základní scénáře komunikace mezi komponentami a jejich použití v praxi.

V předchozích lekcích už jsme se naučili téměř všechno, co v Reactu potřebujeme k vývojí opravdových webových aplikace. Dostáváme se tedy do bodu, kdy postupně začneme stavět rozháhlejší aplikace se stále většího množstvím komponent. Brzy narazíme na situaci, kdy si budeme potřebovat předávat informace mezi různými komponentami. Způsob, jakým si komponenty budou předávat informace bude záviset na tom, jaký spolu mají vztah. V podstatě máme tři základní možnosti.

  1. Komunikace rodič → dítě
  2. Komunikace dítě → rodič

Obě tyto možnosti si ilustrujeme na jednoduché webové aplikaci, ve které si budeme hrát na prezidentské volby. Zdrojové kódy aplikace najdete v tomto repozitáři. Repozitář si naklonujeme a prohlédneme si jeho strukturu.

Naše volební aplikace zobrazuje čtyři kandidáty pomocí komponenty Candidate. Pole obsahující jména a podobizny kandidátů najdeme ve stavu komponenty App. Tato data bychom normálně stáhli odněkud ze serveru. V tomto případě si život malinko ulehčíme a obsah stavu zadrátujeme přímo do kódu.

Z kódu můžeme vyčíst, že komponenta App používá komponenty Candidate. Budeme tedy říkat, že App je takzvaný rodič a komponenty Candidate jsou její děti.

Komunikace rodič → dítě

Předávání informací směrem od rodiče k dítěti je z našich tří situací nejjednodušší a už jsme ji dokonce mnohkrát viděli. Tato komunikace totiž probíhá předáváním hodnot skrze props.

V našem příkladu s volbami vidíme, že komponenta App předává pomocí props data komponentám Candidate.

Komunikace dítě → rodič

Nyní bychom chtěli zařídit, aby se uživatelem vybraný kandidát zobrazit vedle obrázku hradu. Jakmile tedy uživatel vybere nějakého kandidáta v některé z komoponent Candidate, potřebujeme jeho jméno poslat rodičovské komponentě App aby si jej tato mohla uložit do stavu president.

Zde však narážíme na zásadní problém. Komponenta Candidate nemá nejmenší tušení, kdo je její rodič. Zevnitř této komponenty tato informace není nijak dostupná. Musíme si tedy pomoct malým trikem.

Callbacky

Náš trik bude spočívat v tom, že komponentě Candidate skrze props předáme takzvaný callback. Tímto pojmem se v JavaScriptu často označuje funkce, kterou někomu předáváme proto, aby ji tento někdy později zavolal. Anglický název tohoto postupu vzniká právě ze slovního spojení “zavolat zpátky”, tedy “call back”.

S callbacky už jsme se ve skutečnosti setkali dávno, jen jsme jim tehdy říkali posluchače událostí. Každý posluchač události je ve skutečnosti callback. Tlačítku například předáváme funkci, která se má zavolat (call back) ve chvíli, kdy na tlačítku klikneme. V minulé lekci jste viděli, že v Reactu se takové věc zařídí poměrně jednoduše.

const SensitiveButton = (props) => {
  const handleClick = () => {
    console.log('Au');
  };

  return (
    <Button onClick={handleClick}>{props.caption}</Button>
  );
};

Použití callbacků ke komunikaci

V našem příkladu však callback nebudeme používat k poslouchání událostí. Budeme jej volat sami zevnitř komponenty Candidate ve chvíli, kdy chceme rodiči předat jméno zvoleného kandidáta.

Cvičení: Komunikace

1

Kurzovní lístek

to dáš
  1. Naklonujte si repozitář obsahující React stránku s jednoduchým formulářem pro kurzy měn. Prohlédněte si připravený kód.
  2. Do komponenty Rate přidejte prop from, která bude obsahovat kód měny, ze které chceme konvertovat na české koruny. Zařiďte, aby komonenta zobrazila kód měny, který uživatel vybere z nabídky.
  3. Chceme-li získat kurz amerického dolaru, můžeme využít následující API.
    https://api.frankfurter.app/latest?from=USD&to=CZK
    
    Prohlédněte si data, která API vrací. Zkuste do URL jako parametr from zadat nějakou jinou měnu, například CHF a podívejte se, jak se data změní.
  4. Upravte komponentu Rate tak, aby si z API stáhla správny kurz pro měnu, kterou dostane v prop from. Výslední kurz zobrazte v elementu .rate__value.
  5. Zařiďte, aby se správná data stáhla kdykoliv, když se změní hodnota uvniř prop from.
2

Hamburger menu

to dáš
  1. Naklonujte si repozitář obsahující React stránku s jednoduchým hamburger menu. Prohlédněte si připravený kód.
  2. Vytvořte stav menuOpened, který bude obsahovat hodnotu true nebo false podle toho, zda má být menu otevřeno nebo zavřeno. Stav ovládejte kliknutím na tlačítko .menu__btn.
  3. Dle hodnoty ve stavu menuOpened správně sestavte třídu pro element .menu. K zavření menu slouží CSS třída menu--closed.
  4. Nyní budeme chtít zařídit, aby se hamburger menu zavřelo po kliknutí na libovolný odkaz. Uvnitř komponenty App tedy vytvořte callback funkci handleSelectItem, která změní hodnotu stavu menuOpened na false.
  5. Chceme, aby komponenta MenuItem přijímala prop s názvem onSelect. Ta bude očekávat callback, který se zavolá, když uživatel vybere danou položku. Předejte tedy callback handleSelectItem všem komponentám MenuItem jako prop s názvem onSelect.
  6. Uvnitř komponenty MenuItem zajistěte, aby se předaný callback zavolal při kliknutí na položku odkazu.
3

Název stránky

to dáš

Pokračujte v předchozím příkladu. Budeme chtít, aby se při kliknutí na položku menu zobrazil správný název stránky.

  1. Přidejte do komponenty App stav s názvem pageTitle, který bude představovat název aktuální stránky. Jeho výchozí hodnotu nastavte na Domů a použijte tento stav uvnitř elementu h1.
  2. Zařiďte, aby komponenta MenuItem při volání funkce onSelect zavolala tuto funkce se vstupem, který udává název stránky, který se má zobrazit. Takto vlastně předá název stránky rodičovské komponentě.
  3. Do funkce handleSelectItem přidejte parametr page a nastavte stav pageTitle na hodnotu z tohoto parametru.