چگونه state و propهای React خود را در مرورگر ببینیم؟

13 خرداد 1398, خواندن در 1 دقیقه

اگر در حال ساخت یک وب‌اپلیکیشن با استفاده از React هستید، شاید بخواهید state یا propهای کامپوننت‌ها را به صورت realtime ببینید. در اینجا یک راه حل سریع را برای Chrome و Firefox مشاهده می‌نمایید. در ضمن با توجه به محور این مقاله، شما باید دانشی در زمینه React داشته باشید.

React Developer Tools

افزونه React Developer Tools را برای Chrome یا Firefox نصب کنید. این افزونه شما را قادر می‌سازد تا سلسله مراتب کامپوننت‌های React را داخل ابزار توسعه دهنده بازرسی کنید. به همان روشی که نگاهی به عناصر DOM، کنسول یا شبکه دارید.

بازرسی کامپوننت‌های React

۱. برنامه خود را باز کرده و صفحه را با استفاده از ابزار توسعه دهنده بازرسی کنید (Command + Option + I).

۲. React Developer Tools را انتخاب کنید.

۳. یک کامپوننت را از این ساختار درختی انتخاب کنید، تا state و propهای فعلی آن را ببینید.

شما همچنین می‌توانید یک عنصر React را مستقیما از داخل صفحه، با بردن موس بر روی آن در حالت ابزار انتخاب (selection tool) انتخاب کنید:

تغییر دادن State

اگر می‌خواهید state خود را در مرورگر بروزرسانی کنید، بدانید که می‌توانید این کار را انجام دهید! با کلیک کردن بر روی صفات state و ویرایش کردن آن‌ها در زبانه React، آن را تغییر دهید. این کار DOM را مجددا رندر کرده، و state را در propها منتقل خواهد کرد.

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
عرفان کاکایی @er79ka
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو