المكونات المركبة (Nested Components) في React

الدرس العاشر: المكونات المركبة (Nested Components) في React

في هذا الدرس، سنتناول كيفية إنشاء مكونات متداخلة (Nested Components) في React، وكيفية تمرير props بين المكونات المتداخلة، بالإضافة إلى كيفية بناء واجهات معقدة باستخدام مكونات متعددة. تعتبر المكونات المتداخلة من أهم مفاهيم React لأنها تتيح لك بناء تطبيقات ديناميكية وقابلة للتوسعة بسهولة.

1. كيف تنشئ مكونات متداخلة في React؟

في React، يمكننا إنشاء مكونات داخل مكونات أخرى بسهولة. هذا يُعرف بـ المكونات المتداخلة أو المكونات الفرعية، حيث تعمل المكونات الصغيرة معًا لتكوين واجهات مستخدم أكبر وأكثر تعقيدًا.

مثال بسيط لإنشاء مكونات متداخلة:

import React from 'react';

// المكون الفرعي - عنصر فردي في القائمة
function Item({ name }) {
  return <li>{name}</li>;
}

// المكون الرئيسي - يعرض قائمة من العناصر
function ItemList() {
  const items = ['Apple', 'Banana', 'Orange', 'Mango'];

  return (
    <ul>
      {items.map((item, index) => (
        <Item key={index} name={item} /> // تمرير prop للمكون الفرعي
      ))}
    </ul>
  );
}

export default ItemList;

في هذا المثال:

• مكون Item هو مكون فرعي يعرض كل عنصر في القائمة.
• مكون ItemList هو المكون الرئيسي الذي يحتوي على القائمة الكاملة.
• نستخدم map() في المكون الرئيسي لإعادة استخدام المكون الفرعي Item لعرض كل عنصر.

الشرح:

• ItemList هو المكون الأساسي الذي يحتوي على قائمة من العناصر.
• نمرر خاصية name للمكون الفرعي Item باستخدام props، وفي هذا المثال، يكون prop هو اسم العنصر في القائمة.

2. كيفية تمرير props بين المكونات المتداخلة؟

في React، props هي الطريقة الرئيسية لتمرير البيانات بين المكونات. المكونات الفرعية يمكنها استقبال props من المكونات الرئيسية.

مثال على تمرير props بين المكونات المتداخلة:

import React from 'react';

// مكون فرعي يعرض رسالة الترحيب
function WelcomeMessage({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

// المكون الرئيسي - يعرض رسالة الترحيب
function App() {
  return <WelcomeMessage name="John" />; // تمرير prop للمكون الفرعي
}

export default App;

في هذا المثال:

• App هو المكون الرئيسي الذي يمرر name كمُدخل للمكون الفرعي WelcomeMessage.
• المكون WelcomeMessage يستقبل prop يسمى name ويعرضه داخل عنصر <h1>.

الشرح:

• المكونات في React تعتمد بشكل أساسي على props لتبادل البيانات. المكونات الفرعية تستقبل props من المكونات الأم.
• يمكن تمرير المصفوفات أو الكائنات كـ props أيضًا، وليس فقط القيم البسيطة.

3. كيفية بناء واجهات معقدة باستخدام مكونات متعددة؟

بناء واجهات معقدة في React يتطلب تقسيم هذه الواجهة إلى مكونات صغيرة ومتعددة. كل مكون صغير يمكنه التعامل مع جزء من الواجهة، مما يجعل الكود أكثر قابلية لإعادة الاستخدام وأسهل في الصيانة.

مثال على واجهة معقدة باستخدام مكونات متعددة:

import React from 'react';

// مكون فرعي لعرض صورة
function Image({ url, alt }) {
  return <img src={url} alt={alt} />;
}

// مكون فرعي لعرض عنوان
function Title({ text }) {
  return <h2>{text}</h2>;
}

// مكون فرعي لعرض وصف
function Description({ text }) {
  return <p>{text}</p>;
}

// المكون الرئيسي - يعرض مكونات فرعية متعددة
function ProfileCard() {
  const user = {
    name: 'John Doe',
    description: 'Web Developer',
    imageUrl: 'https://example.com/john.jpg',
  };

  return (
    <div>
      <Image url={user.imageUrl} alt="John Doe" />
      <Title text={user.name} />
      <Description text={user.description} />
    </div>
  );
}

export default ProfileCard;

في هذا المثال:

• مكونات فرعية مثل Image و Title و Description تتعامل مع جزء صغير من واجهة المستخدم.
• مكون ProfileCard هو المكون الرئيسي الذي يدمج هذه المكونات الفرعية لتشكيل واجهة معقدة.

الشرح:

• ProfileCard يستخدم المكونات الفرعية لعرض صورة، عنوان، ووصف باستخدام props.
• هذه الطريقة تجعل المكونات قابلة لإعادة الاستخدام بسهولة. إذا أردت استخدام نفس المكونات في أماكن مختلفة، يمكنك فقط تمرير props جديدة لكل مكون.

4. التعامل مع المكونات المتداخلة وحالات التحديث

عند العمل مع المكونات المتداخلة، قد يكون هناك حالات حيث يحتاج مكون فرعي إلى تعديل state في مكون آخر. في هذه الحالة، يمكننا استخدام callbacks (دوال رد الفعل) لتمرير التحديثات من المكونات الفرعية إلى المكونات الرئيسية.

مثال على استخدام callbacks لتحديث الحالة في المكونات المتداخلة:

import React, { useState } from 'react';

// مكون فرعي - عرض عدد النقرات
function Counter({ count, onClick }) {
  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

// المكون الرئيسي - إدارة عدد النقرات
function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1); // تحديث الحالة عند النقر على الزر
  };

  return <Counter count={count} onClick={handleClick} />;
}

export default App;

في هذا المثال:

• Counter هو مكون فرعي يستقبل count و onClick كـ props.
• App هو المكون الرئيسي الذي يدير حالة count ويقوم بتمريرها إلى المكون الفرعي Counter، بالإضافة إلى تمرير دالة handleClick كـ callback ليتم تنفيذها عندما ينقر المستخدم على الزر.

الشرح:

• في هذا السيناريو، المكون الفرعي Counter لا يتعامل مع الحالة مباشرةً. بدلاً من ذلك، يقوم بتمرير الدالة onClick إلى المكون الأم App للتعامل مع التحديثات.
• هذه هي الطريقة الشائعة لتمرير التحديثات بين المكونات المتداخلة في React.

5. الختام

في هذا الدرس:

• تعلمنا كيفية إنشاء مكونات متداخلة في React، حيث يتم استخدام مكونات صغيرة لبناء واجهات مستخدم أكثر تعقيدًا.
• استعرضنا كيفية تمرير props بين المكونات المتداخلة لتمرير البيانات بين المكونات الأم والفرعية.
• تعلمنا كيفية بناء واجهات معقدة باستخدام مكونات متعددة، مما يسمح بإنشاء تطبيقات أكثر مرونة وقابلة للتوسعة.
• ناقشنا كيفية التعامل مع حالات التحديث بين المكونات باستخدام callbacks، مما يتيح للمكونات الفرعية التأثير على الحالة في المكونات الأم.

إتقان المكونات المتداخلة هو خطوة أساسية نحو بناء تطبيقات React قوية وقابلة لإعادة الاستخدام.