Hogyan tekintheti meg a React állapotát és kellékeit a böngészőben

Ha webes alkalmazást épít a React alkalmazással, érdemes valós időben megnéznie az alkatrészek állapotát vagy kellékeit. Itt egy gyors megoldás a Chrome és a Firefox használatához!

Reagáljon a fejlesztői eszközökre

Telepítse a React Developer Tools kiterjesztést a Chrome vagy a Firefox számára. Lehetővé teszi a React összetevő hierarchiák ellenőrzését a fejlesztői eszközökön belül - ugyanúgy, ahogyan a DOM elemeket, a konzolt vagy a hálózatot is bekukucskálná.

React komponensek vizsgálata

  1. Nyissa meg az alkalmazását, és ellenőrizze az oldalt fejlesztői eszközökkel (Command + Option + I).
  2. Válassza a Reader Developer Tools lehetőséget

3. Válasszon ki egy elemet a fából, hogy lássa az állapotát és az aktuális kellékeit.

Választhat egy React elemet is közvetlenül az oldalról, ha a kijelölő eszközzel az egérrel fölé viszi az egeret:

Az állam módosítása

Ha frissíteni kívánja állapotát a böngészőben - megteheti! Módosítsa a Reagálás lap attribútumainak kattintásával és szerkesztésével. Ez újból visszaállítja a DOM-ot, átadva az állapotot a kellékeken keresztül.

Boldog kódolást! ?