كيف ترى حالة React والدعائم في المتصفح

إذا كنت تقوم بإنشاء تطبيق ويب باستخدام React ، فقد ترغب في رؤية حالة المكونات أو دعائمها في الوقت الفعلي. إليك حل سريع لمتصفحي Chrome و FireFox!

أدوات المطور React

قم بتثبيت ملحق أدوات مطور React لمتصفح Chrome أو FireFox. يسمح لك بفحص التسلسلات الهرمية لمكونات React داخل أدوات المطور - بنفس الطريقة التي تلقي بها نظرة خاطفة على عناصر DOM أو وحدة التحكم أو الشبكة.

فحص مكونات التفاعل

  1. افتح التطبيق الخاص بك وافحص الصفحة باستخدام أدوات المطور (Command + Option + I).
  2. حدد أدوات مطور React

3. اختر مكونًا في الشجرة لمعرفة حالته والدعائم الحالية.

يمكنك أيضًا تحديد عنصر React مباشرةً من الصفحة عن طريق التمرير فوقه باستخدام أداة التحديد:

تعديل الدولة

إذا كنت ترغب في تحديث حالتك في المتصفح - يمكنك ذلك! قم بتعديله بالنقر فوق سمات الحالة وتحريرها في علامة التبويب React. سيؤدي هذا إلى إعادة تصيير DOM ، وتمرير الحالة لأسفل من خلال الدعائم.

ترميز سعيد! ؟