الحل: إنشاء سمة ولوحة إشعارات
قم بمراجعة الحل الذي ينفذ سياق سمة مجزأ، ومكون تبديل قابل لإعادة الاستخدام قائم على المخفض، وملخص إشعارات مشتق للوحة إعدادات السمة والإشعارات.
فيما يلي مثال لتطبيق لوحة السمات والإشعارات التي تستخدم سياق سمة محدد النطاق ومكونات تبديل قابلة لإعادة الاستخدام. يوضح هذا التطبيق إدارة الحالة المعيارية، ومعالجة الإشعارات المحلية، وتحديثات واجهة المستخدم بناءً على تغييرات الحالة.
حل
إليكم تطبيق لوحة "السمة" ولوحة "الإشعارات"، والتي تتميز بسياق مجزأ، ومفاتيح تبديل قابلة لإعادة الاستخدام، وإدارة الحالة الديناميكية:
توضيح
إليكم شرح الكود أعلاه:
في
ThemeContext.jsملف:الأسطر 1-4: أنشئ سياقين: أحدهما للحالة، والآخر للإرسال.
الأسطر 6-8: تحديد الحالة الأولية للموضوع
{ mode: "light" }.الأسطر 10-20:
themeReducerمقابض"TOGGLE_MODE"عن طريق قلبmode. ...