Nested Lists القوائم المتداخلة
آخر تحديث: 2026-11-03
Nested Lists القوائم المتداخلة
حين تكون البيانات ببنية متعدّدة المستويات مثل تصنيفات تحتوي عناصر، تعرض قائمة متداخلة عبر map داخل map أو عبر مكوّن تكراري. ويحتفظ كل مستوى بمفاتيحه الخاصة، ويعبّر التداخل عن علاقة التسلسل الهرمي، ويظهر هذا النمط في القوائم الجانبية وشُبكات التعليقات وشجرات الملفات. والمكوّن التكراري هو الخيار الأكثر مرونة لأنه يتعامل مع أي عمق.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function TreeNode({ node }) {
return (
<li>
{node.name}
{node.children?.map((kid) => (
<TreeNode key={kid.id} node={kid} /> // اعرض العناصر الفرعية بشكل تكراري
))}
</li>
)
}القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
شجرة ملفات تفاعلية بخط ثابت: المجلد الجذر src يُنقر لطيّه أو فتحه، ويحتوي الملف main.jsx والمجلد الفرعي components الذي يحوي Button.jsx؛ ويعبّر التداخل عن الهرم.💡 النقاط الأساسية
💡 نصيحة صمّم معرّفات فريدة وثابتة لبيانات الشجرة مسبقاً، واحتفظ بحالة الفتح والطي في مكان واحد مفهرساً بالمعرّف.
⚠️ تحذير يحتاج المكوّن التكراري إلى شرط إنهاء (فقران فارغة) ومفتاح في كل مستوى، وإلا دخل في حلقة لا نهائية أو حذّر.
ℹ️ ملاحظة حين يكون العمق ثابتاً (قائمة من مستويين مثلاً) يكون map داخل map أوضح؛ ولا تلجأ للمكوّن التكراري إلا حين يتغيّر العمق.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف يعرض React بيانات شجرية؟
ج بطريقتين: حين يكون العمق ثابتاً استخدم map داخل map؛ وحين يتغيّر العمق اكتب مكوّناً تكرارياً يستدعي نفسه على عناصره الفرعية.
س ماذا ينبغي الحذر منه في المكوّنات التكرارية؟
ج تحتاج شرط إنهاء لتفادي التكرار اللانهائي، ومفتاحاً فريداً في كل مستوى، وحالة الفتح يُفضّل الاحتفاظ بها في مكان واحد بدل نشرها على المستويات.
س كيف أضبط المفاتيح في قائمة متداخلة؟
ج يوفّر كل مستوى من map مفتاحه الفريد، وغالباً يكون معرّف العقدة في ذلك المستوى؛ وال uniqueness داخل المستوى تكفي، والتكرار بين المستويات مسموح.
