Πώς να δείτε την κατάσταση και τα στηρίγματα του React στο πρόγραμμα περιήγησης

Εάν δημιουργείτε μια εφαρμογή ιστού με το React, ίσως θελήσετε να δείτε την κατάσταση ή τα στηρίγματα των στοιχείων σε πραγματικό χρόνο. Ακολουθεί μια γρήγορη λύση για το Chrome & FireFox!

Αντιδράστε τα Εργαλεία προγραμματιστών

Εγκαταστήστε την επέκταση React Developer Tools για Chrome ή FireFox. Σας επιτρέπει να ελέγχετε τις ιεραρχίες στοιχείων React στα εργαλεία προγραμματιστών - με τον ίδιο τρόπο που θα κοιτάξετε τα στοιχεία, την κονσόλα ή το δίκτυο DOM.

Επιθεώρηση συστατικών αντιδραστηρίων

  1. Ανοίξτε την εφαρμογή σας και ελέγξτε τη σελίδα με εργαλεία προγραμματιστή (Command + Option + I).
  2. Επιλέξτε το React Developer Tools

3. Επιλέξτε ένα στοιχείο στο δέντρο για να δείτε την κατάσταση και τα τρέχοντα στηρίγματα.

Μπορείτε επίσης να επιλέξετε ένα στοιχείο React απευθείας από τη σελίδα τοποθετώντας το δείκτη του ποντικιού πάνω του με το εργαλείο επιλογής:

Τροποποίηση του κράτους

Εάν θέλετε να ενημερώσετε την κατάστασή σας στο πρόγραμμα περιήγησης - μπορείτε! Τροποποιήστε το κάνοντας κλικ και επεξεργάζοντας χαρακτηριστικά κατάστασης στην καρτέλα Αντιδρά Αυτό θα αποδώσει εκ νέου το DOM, περνώντας την κατάσταση κάτω από τα στηρίγματα.

Καλή κωδικοποίηση! ;