التركيب: children والتقسيم إلى مكوّنات

ابنِ مكوّنات حاوية قابلة لإعادة الاستخدام باستخدام الخاصية children، وقسّم شاشاتك إلى مسؤوليات واضحة.

6 دقيقة · 3 أسئلة

بعض المكوّنات لا تعرف محتواها مسبقاً: بطاقة، نافذة منبثقة، تخطيط. تحل React هذا بالخاصية الخاصة children: كل ما تضعه بين وسمَي مكوّن الفتح والإغلاق يُسلَّم إليه، جاهزاً ليُدرَج حيثما يشاء. تتولى الحاوية الإطار، ويوفر المُستدعِي المحتوى.

function Card({ children }) {
  return <section className="card">{children}</section>;
}

function App() {
  return (
    <Card>
      <h2>Invoice #1024</h2>
      <p>Amount: €49.90</p>
    </Card>
  );
}

عندما لا يكفي منفذ واحد، مرّر الـ JSX عبر props مسمّاة: عنوان، تذييل، شريط إجراءات. يمكن لأي prop أن يستقبل عنصر React تماماً مثل أي قيمة أخرى. تحصل على عدة “منافذ”، كل منها مسمّى بوضوح.

function Modal({ title, footer, children }) {
  return (
    <div className="modal">
      <header>{title}</header>
      <div className="modal-body">{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

يوجّه التركيب أيضاً التقسيم. ينبغي أن تكون للمكوّن مسؤولية واحدة قابلة للتحديد: عرض صف مستخدم، تخطيط قائمة. بمجرد أن يراكم المكوّن عدة أدوار، استخرج مكوّنات فرعية: يصبح كل منها أقصر وأسهل اختباراً وقابلاً لإعادة الاستخدام في مكان آخر.

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <UserRow key={user.id} user={user} />
      ))}
    </ul>
  );
}

function UserRow({ user }) {
  return (
    <li>
      <strong>{user.name}</strong> - {user.email}
    </li>
  );
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ماذا تستقبل الخاصية children لمكوّن ما؟
   • قائمة مكوّناته الأبناء المُعلَنة في الملف نفسه
   • كل ما وُضِع بين وسمَي الفتح والإغلاق الخاصين به
   • الـ props التي يمررها المكوّن الأب
2. هل يمكنك تمرير JSX في prop غير children؟
   • نعم، عنصر React قيمة كأي قيمة أخرى
   • لا، الخاصية children وحدها تقبل الـ JSX
   • نعم، لكن كسلسلة نصية تحتوي على HTML فقط
3. أي إشارة تدل بأكبر قدر من الموثوقية على أن مكوّناً ينبغي تقسيمه؟
   • أنه يتجاوز عشرين سطراً من الشيفرة
   • أنه يستخدم أكثر من useState واحد
   • أنه يجمع عدة مسؤوليات متمايزة في عرضه