التعامل مع props في React

الدرس الرابع: التعامل مع props في React

في هذا الدرس، سنتعلم عن props في React وكيفية استخدامها لنقل البيانات بين المكونات. سنتعرف على كيفية تمرير البيانات عبر props، وكيفية تعيين القيم الافتراضية باستخدام defaultProps، وأهمية Prop types للتحقق من الأنواع.

1. ما هي props في React؟

props (التي تعني Properties) هي آلية في React تسمح بتمرير البيانات من المكونات العليا (Parent Components) إلى المكونات السفلى (Child Components). يمكن للمكونات السفلى الوصول إلى هذه البيانات عبر props وتستخدمها لعرض المحتوى أو تغيير السلوك. props تُعتبر قراءة فقط في المكونات السفلى، مما يعني أنه لا يمكن تعديلها مباشرة، ولكن يمكن تعديلها في المكونات العليا التي تمرر هذه البيانات.

متى يتم استخدام props؟

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

مثال على استخدام props:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Welcome name="John" />;
}

export default App;

في هذا المثال، يتم تمرير قيمة name="John" من مكون App إلى مكون Welcome عبر props. داخل مكون Welcome، نقوم بعرض القيمة التي تم تمريرها عبر props.name.

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

تمرير البيانات عبر props بين المكونات يعتمد على التدرج الهرمي للمكونات في React. المكونات العليا يمكن أن تمرر البيانات إلى المكونات السفلى عبر props.

مثال على تمرير بيانات من مكون أب إلى مكون سفلي:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  const userName = "Alice";
  return <Greeting name={userName} />;
}

export default App;

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

• في App، نقوم بتعريف متغير userName.
• ثم نقوم بتمرير userName إلى مكون Greeting عبر props.

3. استخدام defaultProps لضبط القيم الافتراضية

في بعض الأحيان، قد لا يتم تمرير بعض القيم عبر props من المكونات العليا. في هذه الحالة، يمكنك استخدام defaultProps لضبط القيم الافتراضية لهذه الخصائص في المكونات السفلى.

مثال على استخدام defaultProps:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Welcome.defaultProps = {
  name: 'Guest',
};

function App() {
  return <Welcome />;
}

export default App;

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

• Welcome.defaultProps يتم تعيين القيمة الافتراضية للخاصية name لتكون Guest.
• إذا لم يتم تمرير قيمة name من المكون الأب، سيتم استخدام القيمة الافتراضية Guest.

4. Prop types للتحقق من الأنواع

Prop types هي طريقة في React للتحقق من الأنواع (types) للخصائص التي يتم تمريرها إلى المكونات. يساعد هذا في ضمان أن البيانات التي يتم تمريرها إلى المكونات تتوافق مع النوع المتوقع.

كيفية استخدام Prop types:

• أولاً، تحتاج إلى تثبيت مكتبة prop-types.

npm install prop-types

• ثم، يمكنك تحديد الأنواع المتوقعة باستخدام PropTypes.

مثال على استخدام PropTypes للتحقق من الأنواع:

import React from 'react';
import PropTypes from 'prop-types';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Welcome.propTypes = {
  name: PropTypes.string.isRequired,
};

function App() {
  return <Welcome name="Alice" />;
}

export default App;

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

• نقوم بتحديد أن name يجب أن يكون من نوع string.
• كما أننا أضفنا isRequired لضمان أن الخاصية name يجب أن تكون موجودة عندما يتم استخدام المكون.

أنواع البيانات المدعومة في PropTypes:

• PropTypes.string: لتحديد أن الخاصية يجب أن تكون نصًا.
• PropTypes.number: لتحديد أن الخاصية يجب أن تكون رقمًا.
• PropTypes.bool: لتحديد أن الخاصية يجب أن تكون قيمة منطقية.
• PropTypes.array: لتحديد أن الخاصية يجب أن تكون مصفوفة.
• PropTypes.object: لتحديد أن الخاصية يجب أن تكون كائنًا.
• PropTypes.func: لتحديد أن الخاصية يجب أن تكون دالة.
• PropTypes.node: لتحديد أن الخاصية يمكن أن تكون أي شيء يمكن أن يُعرض في واجهة المستخدم (مثل النصوص أو العناصر أو المكونات).

5. الاختلاف بين props و state

• props: تُستخدم لتمرير البيانات من مكون أعلى إلى مكون أسفل ولا يمكن تغييرها داخل المكونات السفلى.
• state: تُستخدم لتخزين البيانات التي يمكن تغييرها داخل المكونات (عادةً باستخدام setState في class components أو useState في function components).

6. الختام

في هذا الدرس:

• تعلمنا ما هي props في React وكيفية استخدامها لتمرير البيانات بين المكونات.
• قمنا بتوضيح كيفية استخدام defaultProps لضبط القيم الافتراضية في المكونات.
• فهمنا أهمية PropTypes للتحقق من الأنواع وتجنب الأخطاء عند تمرير البيانات بين المكونات.

props هي آلية أساسية في React تمكّن المكونات من التواصل وتبادل البيانات بطريقة مرنة، مما يجعل تطوير واجهات المستخدم أكثر قابلية للتطوير.