6

Komunikace mezi komponentami

Představíme si hlavní 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č
  3. Komunikace mezi sourozenci

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.

Komunikace dítě → rodič

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.

Komunikace mezi sourozenci