children خاصية children
آخر تحديث: 2026-11-03
children خاصية children
children خاصية خاصة: أي شيء يقع بين وسم فتح المكوّن ووسم إغلاقه يصبح تلقائياً props.children. تتيح ذلك للمكوّن أن يغلّف محتوى اعتباطياً، وهي أساس الحاويات العامة مثل التخطيطات والنوافذ المنبثقة والبطاقات. أي أن الحاوية تقرّر فقط كيف تغلّف المحتوى، لا ما يجب أن يكون المحتوى.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function Card({ children }) {
return <div className="card">{children}</div>
}
<Card>Content between the tags is passed to children automatically</Card>⚙️ المعاملات
| children | المحتوى بين وسمي المكوّن: النصوص وJSX والمصفوفات وحتى الدوال كلها تنتهي في هذه الخاصية الخاصة. |
|---|
القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
بطاقتان زرقاء مستديرتان: الأولى تلتفّ سطر نص واحد، والثانية تلتفّ عنواناً عريضاً وفقرة وزراً — الحاوية Card نفسها تغلّف محتوى مختلفاً تماماً.💡 النقاط الأساسية
💡 نصيحة تتيح children للمكوّن أن يهتم بكيفية التغليف لا بما يُغلَّف، وهذه هي الأداة الأساسية لتفوّق التركيب على الوراثة.
ℹ️ ملاحظة يمكن أن تكون children نصاً أو عنصراً أو مصفوفة أو حتى دالة (نمط render-props).
⚠️ تحذير عند تمرير عدة عناصر فرعية تصبح children مصفوفة؛ لا تفترض أبداً أنها عنصر واحد.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما هو props.children؟
ج هو المحتوى بين وسم فتح المكوّن ووسم إغلاقه. يمرّره React تلقائياً باسم children، وهو أساس مكونات الحاويات مثل التخطيطات والبطاقات والنوافذ المنبثقة.
س هل يمكنني دائماً معاملة children كمصفوفة؟
ج ليس دائماً: مع عنصر فرعي واحد تكون هي ذلك العنصر نفسه، ولا تصبح مصفوفة إلا مع عدة عناصر. استخدم أدوات React.Children حين تحتاج شكلاً ثابتاً.
س متى أستخدم children ومتى أستخدم prop مسمّى؟
ج المحتوى المتداخل يناسب children طبيعياً (النوافذ المنبثقة والتخطيطات)، بينما بيانات الإعداد تناسب الخصائص المسمّاة (العنوان واللون)؛ وكثيراً ما يُستخدمان معاً.
