ما هي الـ Props؟ كيفية تمرير البيانات من المكون الأب إلى المكون الابن

مرحباً أيها المبرمجون! في هذا الدرس الاحترافي، ماذا سنتعلم اليوم؟ سنتعمق في مفهوم الـ Props في React، وكيفية استخدامها لتمرير البيانات من المكونات الأب إلى المكونات الابن بكفاءة.

الـ Props (اختصار لـ "Properties") هي آلية أساسية في React تسمح لك بتمرير البيانات من مكون أب إلى مكون ابن. تخيلها كـ "وسيطات" (arguments) يمكنك تمريرها لدالة ما، حيث المكون الابن هو الدالة والمكون الأب هو الذي يستدعيها ويمرر لها الوسيطات.

الخطوة 1: إنشاء مكون أب بسيط

لنبدأ بإنشاء مكون أب (Parent Component) سيحتوي على البيانات التي نرغب في تمريرها. في هذا المثال، سنقوم بإنشاء مكون App.

// App.js
import React from 'react';

function App() {
  const userName = "أحمد"; // تعريف بيانات سيتم تمريرها
  const welcomeMessage = "أهلاً بك في درس الـ Props!"; // تعريف رسالة ترحيب

  return (
    <div>
      <h1>تطبيق الـ Props</h1>
      {/* هنا سيتم استدعاء المكون الابن وتمرير البيانات إليه */}
    </div>
  );
}

export default App;

في هذه الخطوة، قمنا بتعريف مكون App وتجهيز بعض البيانات (userName و welcomeMessage) التي نرغب في تمريرها لاحقاً إلى مكون ابن.

الخطوة 2: إنشاء مكون ابن يستقبل الـ Props

الآن، لنقم بإنشاء مكون ابن (Child Component) باسم Greeting. هذا المكون سيكون مسؤولاً عن عرض البيانات التي يستقبلها من المكون الأب.

// Greeting.js
import React from 'react';

// المكون الابن يستقبل "props" كوسيط
function Greeting(props) {
  // الوصول إلى البيانات الممررة عبر كائن الـ props
  return (
    <div>
      <h2>مرحباً، {props.name}!</h2> {/* استخدام خاصية name من الـ props */}
      <p>{props.message}</p> {/* استخدام خاصية message من الـ props */}
    </div>
  );
}

export default Greeting;

لاحظ كيف أن المكون Greeting يستقبل وسيطاً واحداً هو props. هذا الكائن يحتوي على جميع الخصائص التي سيتم تمريرها من المكون الأب. نستخدم props.name و props.message للوصول إلى البيانات.

الخطوة 3: تمرير الـ Props من الأب إلى الابن

الآن حان وقت ربط المكونين! سنقوم بتعديل المكون App لاستدعاء المكون Greeting وتمرير البيانات إليه كـ "خصائص" (attributes).

// App.js (تعديل)
import React from 'react';
import Greeting from './Greeting'; // استيراد المكون الابن

function App() {
  const userName = "أحمد";
  const welcomeMessage = "أهلاً بك في درس الـ Props!";

  return (
    <div>
      <h1>تطبيق الـ Props</h1>
      {/* استدعاء المكون الابن وتمرير البيانات كـ props */}
      <Greeting name={userName} message={welcomeMessage} />
      {/* يمكن أيضاً تمرير قيم مباشرة: */}
      <Greeting name="سارة" message="نتمنى لك يوماً سعيداً!" />
    </div>
  );
}

export default App;

في هذه الخطوة، قمنا باستيراد المكون Greeting ثم استخدمناه داخل المكون App. لاحظ كيف قمنا بتمرير userName إلى الخاصية name و welcomeMessage إلى الخاصية message. هذه هي الطريقة التي يتم بها تمرير الـ Props!

ملاحظة تقنية هامة: الـ Props هي للقراءة فقط (Read-Only). هذا يعني أن المكون الابن لا يجب أن يحاول تعديل قيمة الـ Props التي استقبلها من المكون الأب. إذا احتاج المكون الابن لتعديل البيانات، فيجب أن يتم ذلك عبر وظائف (functions) يتم تمريرها كـ Props من المكون الأب.

الكود النهائي الكامل

إليك الكود الكامل الذي يجمع المكونين في ملف واحد (مثلاً App.js) لتجربته بسهولة:

import React from 'react';

// المكون الابن: يستقبل "props" ويعرضها
function Greeting(props) {
  return (
    <div>
      <h2>مرحباً، {props.name}!</h2> {/* الوصول إلى خاصية name */}
      <p>{props.message}</p> {/* الوصول إلى خاصية message */}
    </div>
  );
}

// المكون الأب: يمرر البيانات إلى المكون الابن كـ props
function App() {
  const userName = "أحمد"; // بيانات ليتم تمريرها
  const welcomeMessage = "أهلاً بك في درس الـ Props!"; // رسالة ترحيب

  return (
    <div>
      <h1>تطبيق الـ Props</h1>
      {/* تمرير المتغيرات كـ props */}
      <Greeting name={userName} message={welcomeMessage} />
      {/* تمرير قيم مباشرة كـ props */}
      <Greeting name="سارة" message="نتمنى لك يوماً سعيداً!" />
      {/* مثال آخر بتمرير بيانات مختلفة */}
      <Greeting name="علي" message="استمتع بالبرمجة!" />
    </div>
  );
}

export default App;

النتيجة المتوقعة

عند تشغيل هذا التطبيق، ستظهر النتيجة التالية على الشاشة:

تطبيق الـ Props
مرحباً، أحمد!
أهلاً بك في درس الـ Props!
مرحباً، سارة!
نتمنى لك يوماً سعيداً!
مرحباً، علي!
استمتع بالبرمجة!

وبهذا نكون قد أتقنا كيفية استخدام الـ Props لتمرير البيانات بين المكونات في React. استمر في التجربة والبناء!

← السابقالفهرس