❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

Reactالكائن props

  • مفهوم props في React
  • تحضير مشروع للتطبيق العملي
  • تمرير قيم للمكوّن في React
  • تمرير قيمة متغير للمكوّن في React
  • تمرير قيم كائن للمكوّن في React

مفهوم props في React

المكوّن الذي سيتم عرضه في واجهة المستخدم يمكن تمرير خصائص ( Properties ) له بشكل مباشر بطريقة مشابهة لأسلوب HTML.
من بعدها جميع الخصائص التي تم تمريرها للمكوّن يمكن الوصول لها من خلال الكائن props الذي يملكه المكوّن.

قيم الخصائص في الكائن props يمكن قراءتها فقط مما يعني أنه لا يمكن تغييرها فهي قيم ثابتة غير قابلة للتعديل.

تحضير مشروع للتطبيق العملي

إفعل الخطوات التالية حتى تقوم ببناء مشروع جديد و تطبق فيه الأمثلة كما فعلنا بالضبط:

  1. قم ببناء مشروع جديد إسمه demo-app.
  2. بداخل المجلد src تجد مجلد إسمه App.js قم بحذف كل الكود الإفتراضي الموجود فيه.
  3. بداخل المجلد src قم بإنشاء مجلد جديد إسمه components.
  4. بداخل المجلد components قم بإنشاء ملف جديد إسمه Products.js لأنه سيمثل مكوّن.

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

تمرير قيم للمكوّن في React

في المثال التالي قمنا بإنشاء مكوّن جديد إسمه <Product> و وضعنا فيه باراميتر إسمه props مما سيجعله قادر على استقبال خصائص خارجية عند عرضه في واجهة المستخدم.

بداخل المكوّن <Product> قمنا بعرض قيمة خاصيّة إسمها name و خاصيّة إسمها price و التي من المفترض أن يتم تمريرهما للمكون عندما يتم عرضه في واجهة المستخدم.

في النهاية قمنا بعرض المكوّن <Product> في المكوّن <App> مع تمرير قيمة للخاصية name و قيمة للخاصية price له كما يتوقع.

مثال

/src/components/Product.js 
// props مع وضع باراميتر واحد فيه إسمه Product هنا قمنا بتعريف دالة تمثل مكون إسمه
// اللتين سيتم تمريرهما لاحقاً عند تضمين المكون price و name بداخل المكون قمنا بعرض قيمة الخاصيتين 
function Product(props) {
    return (
        <div>
            <p>Name: {props.name}</p>
            <p>Price: {props.price}$</p>
        </div>
    );
}

// يمكن الوصول إليه من خارج هذا الملف Product هنا قمنا بجعل المكون
export default Product;
/src/App.js 
// Product.js الموجود في الملف Product هنا قمنا بتضمين المكون
import Product from "./components/Product";

// price و name مع تمرير قيم للخصائص <Product/> قمنا بعرض المكون <App> بداخل المكون
function App() {
    return (
        <Product name="Samsung screen" price="340"/>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;
جرب الكود

إذاً الباراميتر props الذي تم وضعه في المكوّن، قامت React بتحويله إلى كائن و من ثم قامت بوضع جميع الخصائص التي تم تمريرها للمكوّن عند عرضه في واجهة المستخدم كخصائص في هذا الكائن.

بالنسبة للمكوّن <Product> فإن الباراميتر props أصبح عبارة عن كائن كما يلي.

props = {
    name: "Samsung screen",
    price: "340"
}

لهذا السبب عند عرض قيم خصائص الكائن props كتبنا props.name و props.price فهي موجودة بداخله.

تمرير قيمة متغير للمكوّن في React

في المثال السابق، عندما قمنا بتمرير قيم لخصائص المكوّن فإننا فعلياً قمنا بتمريرها كقيم نصيّة، مما يعني أنه حتى العدد الذي قمنا بتمريره في الخاصية price قد تم فعلياً تمريره لها على شكل نص هكذا "340".

لضمان أن يتم تمرير القيمة بنوعها الصحيح إلى المكوّن، يمكنك وضعها بداخل متغير و من ثم تمرير قيمة المتغير إلى الخاصيّة.

في المثال التالي قمنا بتعريف متغير إسمه nameValue و متغير إسمه priceValue و وضعنا فيهما القيم التي ننوي تمريرها لخصائص المكون <Product>.
بعدها قمنا بتمرير قيمة المتغير nameValue للخاصية name و قيمة المتغير priceValue للخاصية price.

مثال

/src/App.js 
// Product.js الموجود في الملف Product هنا قمنا بتضمين المكون
import Product from "./components/Product";

// <Product/> هنا قمنا بتعريف المتغيرات التي سنمرر قيمها لخصائص المكون
const nameValue = "Samsung screen";
const priceValue = 340;

// مع تمرير <Product/> قمنا بعرض المكون <App> بداخل المكون
// name للخاصية nameValue قيمة المتغير
// price للخاصية priceValue و قيمة المتغير 
function App() {
    return (
        <Product name={nameValue} price={priceValue} />
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;
جرب الكود

بالنسبة للمكوّن <Product> فإن الباراميتر props أصبح عبارة عن كائن كما يلي.

props = {
    name: "Samsung screen",
    price: 340
}

لاحظ أن قيمة الخاصية price موضوعة في الكائن props كعدد و ليس كنص.

تمرير قيم كائن للمكوّن في React

في حال كنت ستمرر مجموعة من الخصائص إلى المكون مع ضمان عدم حدوث مشكلة في أنواع البيانات و بدون الحاجة إلى تعريف متغير لكل خاصية في المكوّن كما فعلنا في المثال السابق، يمكنك ببساطة وضع جميع قيم الخصائص بداخل كائن واحد و من ثم تمرير الكائن للمكوّن.

هنا نقصد أنه سيتم تمرير الكائن كما هو للخاصية و بالتالي فإننا في المكوّن سنكون نتعامل مع كائن بداخل كائن.

في المثال التالي قمنا بتعريف متغير إسمه data و وضعنا فيه الخصائص و القيم التي نريد تمريرها للمكوّن <Product>.
في المكوّن <Product> لاحظ أننا قمنا هذه المرة بالوصول إلى قيم الخصائص من خلال كتابة props.data.

مثال

/src/components/Product.js 
// props مع وضع باراميتر واحد فيه إسمه Product هنا قمنا بتعريف دالة تمثل مكون إسمه
// data الموجودتين بداخل الكائن price و name بداخل المكون قمنا بعرض قيمة الخاصيتين 
// و الذي سيتم تمريره كخاصية له لاحقاً عند تضمين المكون 
function Product(props) {
    return (
        <div>
            <p>Name: {props.data.name}</p>
            <p>Price: {props.data.price}$</p>
        </div>
    );
}

// يمكن الوصول إليه من خارج هذا الملف Product هنا قمنا بجعل المكون
export default Product;
/src/App.js 
// Product.js الموجود في الملف Product هنا قمنا بتضمين المكون
import Product from "./components/Product";

// <Product/> هنا قمنا بتعريف المتغيرات التي سنمرر قيمها لخصائص المكون
const data = {
    name: "Samsung screen",
    price: 340
};

// data للخاصية dataObject مع تمرير الكائن <Product/> قمنا بعرض المكون <App> بداخل المكون
function App() {
    return (
        <Product data={data} />
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;
جرب الكود

بالنسبة للمكوّن <Product> فإن الباراميتر props أصبح عبارة عن كائن بداخله كائن كما يلي.

props = {
    data {
        name: "Samsung screen",
        price: 340
    }
}