Ako vidieť váš stav a rekvizity React v prehliadači

Ak vytvárate webovú aplikáciu pomocou aplikácie React, možno budete chcieť vidieť stav alebo rekvizity komponentov v reálnom čase. Toto je rýchle riešenie pre Chrome a FireFox!

Reagujte na vývojárske nástroje

Nainštalujte si rozšírenie React Developer Tools pre Chrome alebo FireFox. Umožňuje vám skontrolovať hierarchie komponentov React v rámci vývojárskych nástrojov - rovnakým spôsobom ako by ste nahliadli do prvkov DOM, konzoly alebo siete.

Kontrola reagujúcich komponentov

  1. Otvorte aplikáciu a skontrolujte stránku pomocou nástrojov pre vývojárov (Command + Option + I).
  2. Vyberte Reagovať vývojárske nástroje

3. Vyberte komponent v strome, aby ste videli jeho stav a aktuálne rekvizity.

Element React môžete zvoliť aj priamo zo stránky tak, že naň umiestnite kurzor myši pomocou nástroja na výber:

Zmena štátu

Ak chcete aktualizovať svoj stav v prehliadači - môžete! Upravte ho kliknutím a úpravou atribútov stavu na karte Reagovať. Toto znova vykreslí DOM a odovzdá stav dole pomocou rekvizít.

Šťastné programovanie! ?