Generic Components المكوّنات العامة (Generics)

آخر تحديث: 2026-11-03

Generic Components المكوّنات العامة (Generics)

تُتابع المكوّنات العامة النوع مع البيانات: تَرسم function List<T> مصفوفة نصوص بـ T=string ومصفوفة كائنات بـ T=User. تكتبها مرة فيحصل كل نوع عنصر على استنتاج وتلميحات كاملة، وهي التقنية الجوهرية خلف مكتبات الواجهة القابلة لإعادة الاستخدام وطبقات البيانات. ويتوقف منطق المكوّن عن الاكتراث بشكل العناصر، فنفس الكود يخدم أي حمولة يمرّرها المستدعي.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

type ListProps<T> = {
  items: T[]
  renderItem: (item: T) => React.ReactNode   // the caller decides how to render
  keyOf?: (item: T) => string | number
}

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return (
    <ul>
      {items.map((it, i) => (
        <li key={keyOf ? keyOf(it) : i}>{renderItem(it)}</li>
      ))}
    </ul>
  )
}

// T is inferred automatically at the call site:
<List items={['a', 'b']} renderItem={s => s.toUpperCase()} />      // T = string
<List items={users} renderItem={u => u.name} keyOf={u => u.id} />   // T = User

القيمة المرجعة：لا قيمة مرجعة؛ إنها نمط برمجي وليست واجهة قابلة للاستدعاء.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

ثلاث قوائم تعيد استخدام ذات GenericList لترسم نصوصًا وأرقامًا وكائنات — تجعل العوامل العامة منطق المكوّن منفصلًا عن نوع العنصر (عرض JSX وقت التشغيل، والأنواع تُستنتج في نسخة TypeScript).

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن