Props في React - مشاركة البيانات بين المكونات

ما هي Props في الـ React ؟

من أهم مميزات React أنها تعتمد على مبدأ إعادة استخدام المكونات (Components).

لكن ماذا لو أردنا أن نرسل بيانات من مكون إلى آخر؟

هنا يأتي دور Props، وهي اختصار لـ Properties.

تعتبر Props الطريقة الأساسية لمشاركة البيانات بين المكونات في React.

ببساطة، Props هي القيم أو البيانات التي نمررها إلى المكون كـ معاملات (Arguments).
تشبه إلى حد كبير الـ Parameters في الدوال في JavaScript.

مثال بسيط:

function Welcome(props) {
  return <h1>مرحبًا {props.name}</h1>;
}

<Welcome name="أحمد" />
<Welcome name="سارة" />

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

• أنشأنا مكون Welcome يستقبل props.
• مررنا خاصية name لكل نسخة من المكون.
• النتيجة:
  • مرحبًا أحمد
  • مرحبًا سارة

---

لماذا نستخدم Props؟

• لفصل المنطق عن البيانات.
• لجعل المكونات قابلة لإعادة الاستخدام.
• لتسهيل مشاركة البيانات بين المكونات المختلفة.
• لكتابة كود منظم ومرن.

---

استخدام Props مع أكثر من قيمة

يمكننا تمرير أكثر من خاصية لمكون واحد:

function Profile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>العمر: {props.age}</p>
      <p>المدينة: {props.city}</p>
    </div>
  );
}

<Profile name="علي" age={25} city="القاهرة" />;

سيتم عرض:

علي
العمر: 25
المدينة: القاهرة

---

تفكيك Props (Destructuring)

بدلاً من كتابة props.name و props.age، يمكننا استخدام التفكيك (Destructuring):

function Profile({ name, age, city }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>العمر: {age}</p>
      <p>المدينة: {city}</p>
    </div>
  );
}

هذا يجعل الكود أبسط وأسهل في القراءة.

---

تمرير دوال كـ Props

يمكننا تمرير دوال كـ Props، وهذا مفيد جدًا للتفاعل مع الأحداث:

function Button({ onClick, label }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  const sayHello = () => alert("مرحبًا بك!");

  return <Button onClick={sayHello} label="اضغط هنا" />;
}

هنا App مرر دالة sayHello لمكون Button ليتم استدعاؤها عند النقر.

---

Props للأطفال (Children)

أحيانًا نريد تمرير عناصر كاملة داخل المكون.
يمكننا استخدام خاصية children المدمجة في React:

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

<Card>
  <h2>عنوان البطاقة</h2>
  <p>هذا هو المحتوى داخل البطاقة</p>
</Card>;

سيتم عرض المحتوى داخل مكون Card.

---

Props مقابل State

من المهم التمييز بين Props و State:

الخاصية	Props	State
المصدر	من المكون الأب	داخل المكون نفسه
التعديل	لا يمكن تغييرها	قابلة للتغيير
الغرض	مشاركة البيانات	إدارة البيانات الداخلية

---

أفضل الممارسات عند استخدام Props

• اجعل المكونات قابلة لإعادة الاستخدام عن طريق تمرير Props مرنة.
• استخدم Destructuring لجعل الكود أوضح.
• مرر دوال عبر Props للتعامل مع الأحداث.
• لا تحاول تعديل قيمة Props داخل المكون.
• استعمل PropTypes أو TypeScript للتحقق من أنواع البيانات.

---

خلاصة

• Props هي وسيلة React لمشاركة البيانات بين المكونات.
• تشبه معاملات الدوال (Arguments).
• يمكن أن تكون نصوصًا، أرقامًا، دوالًا، أو حتى عناصر كاملة.
• تجعل المكونات أكثر مرونة وقابلة لإعادة الاستخدام.

بفضل Props، تستطيع إنشاء مكونات ديناميكية وذكية تعيد استخدام نفس الكود بطرق مختلفة.
إذا كنت تتعلم React، فإن فهم Props هو من أول الخطوات الأساسية لإتقان بناء واجهات المستخدم.

---

هل جربت تمرير بيانات بين المكونات باستخدام Props؟ ✨
شاركنا تجربتك!