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