react-ui-patterns
بناء واجهات React باستخدام الأنماط الحديثة
تواجه تطبيقات React صعوبات مع حالات التحميل ومعالجة الأخطاء والحالات الفارغة مما يؤدي إلى تجربة مستخدم سيئة. توفر هذه المهارة أنماطًا مجربة لإدارة حالات واجهة المستخدم وإرسال النماذج وجلب البيانات غير المتزامن.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「react-ui-patterns」。 أضف حالة تحميل إلى المكون الخاص بي الذي يجلب العناصر
預期結果:
سأضيف فحص حالة التحميل المناسب. المفتاح هو إظهار مؤشر التحميل فقط عندما لا تكون هناك بيانات متاحة. هذا يمنع واجهة المستخدم من الوميض عند إعادة جلب البيانات المخزنة مؤقتًا. سأنفذ النمط: التحقق من الخطأ أولاً، ثم التحميل بدون بيانات، ثم الحالة الفارغة، ثم عرض العناصر.
正在使用「react-ui-patterns」。 يمكن النقر على زر النموذج الخاص بي عدة مرات أثناء الإرسال
預期結果:
سأصلح هذا عن طريق تعطيل الزر أثناء حالة التحميل. يجب أن يحتوي الزر على كل من خاصيتي disabled وisLoading المعينتين لحالة التحميل. هذا يمنع الإرسالات المتعددة ويعطي ملاحظات مرئية للمستخدم بأن الإجراء قيد المعالجة.
安全審計
安全This skill is pure documentation teaching React UI patterns. All static findings are false positives from markdown code blocks and metadata references. No executable code, network operations, or security risks present.
品質評分
你能建構什麼
إصلاح وميض مؤشرات التحميل
تطبيق شجرة قرارات حالة التحميل للقضاء على وميض واجهة المستخدم أثناء إعادة جلب البيانات من خلال التحقق من البيانات المخزنة مؤقتًا الموجودة قبل إظهار مؤشرات التحميل.
تنفيذ معالجة شاملة للأخطاء
إضافة حالات الأخطاء وملاحظات المستخدم لجميع العمليات غير المتزامنة باستخدام التسلسل الهرمي لمعالجة الأخطاء من الأخطاء المضمنة إلى شاشات الأخطاء الكاملة.
بناء تجارب نماذج أفضل
إنشاء تدفقات إرسال النماذج مع التحقق المناسب وحالات التحميل والأزرار المعطلة وملاحظات الأخطاء باستخدام نمط إرسال النماذج.
試試這些提示
أضف حالة تحميل إلى مكون React الخاص بي الذي يجلب بيانات المستخدم. تأكد من أنها لا تومض عند إعادة الجلب.
أضف معالجة الأخطاء لهذا التغيير مع إشعارات منبثقة وخيار إعادة المحاولة. أظهر الأخطاء للمستخدمين بشكل صحيح.
أضف حالة فارغة لمكون القائمة هذا مع زر إجراء لإنشاء العنصر الأول.
أعد هيكلة هذا النموذج لاتباع أفضل الممارسات مع التحقق وحالات التحميل والأزرار المعطلة أثناء الإرسال وعرض الأخطاء المناسب.
最佳實務
- التحقق من الأخطاء أولاً، ثم حالة التحميل مع شرط عدم وجود بيانات، ثم الحالة الفارغة قبل عرض المحتوى
- تعطيل الأزرار وحقول إدخال النماذج دائمًا أثناء العمليات غير المتزامنة لمنع الإرسالات المكررة
- إظهار جميع الأخطاء للمستخدمين مع ملاحظات واجهة المستخدم المناسبة وتوفير خيارات إعادة المحاولة عندما يكون ذلك ممكنًا
避免
- إظهار مؤشرات التحميل الدوارة عندما توجد بيانات مخزنة مؤقتًا يسبب وميضًا غير ضروري لواجهة المستخدم
- اعتراض الأخطاء وتسجيلها فقط في وحدة التحكم يترك المستخدمين غير مدركين للفشل
- السماح للأزرار بالبقاء ممكنة أثناء العمليات غير المتزامنة يؤدي إلى إرسالات مكررة وحالات تنافسية