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

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 37 ثانیه
دسته بندی ها : react

اگر در حال ساخت یک وب‌اپلیکیشن با استفاده از 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 خود را در مرورگر ببینیم؟

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

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

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

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

تغییر دادن State

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

منبع

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

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