تعلم React من الصفر بالعربيةالدرس 2 من 5
الخصائص Props في React: تمرير البيانات بين المكونات
درس Props في React بالعربية: كيف تمرر البيانات من مكون أب إلى ابن، والتفكيك، والقيم الافتراضية، وخاصية children، وتمرير الدوال، مع أمثلة تفاعلية تشغلها في المتصفح.
محتويات الدرس
Props (الخصائص) هي طريقة تمرير البيانات إلى المكون، تمامًا كالسمات في HTML.
أول مثال
جرّب بنفسكReact 18 يعمل في متصفحك
اضغط «تشغيل» لترى النتيجة هنا.
التفكيك والقيم الافتراضية
الطريقة الأشيع أن تفكك الخصائص مباشرة:
جرّب بنفسكReact 18 يعمل في متصفحك
اضغط «تشغيل» لترى النتيجة هنا.
النصوص بين علامتي تنصيص، وأي شيء آخر (رقم، مصفوفة، دالة) بين { }.
children: المحتوى بين الوسمين
جرّب بنفسكReact 18 يعمل في متصفحك
اضغط «تشغيل» لترى النتيجة هنا.
قاعدة ذهبية
Props للقراءة فقط. المكون لا يعدّل خصائصه أبدًا؛ إذا احتجت قيمة تتغير فاستخدم الحالة في الدرس التالي.
تمرير دالة
الأب يستطيع أن يعطي الابن دالة ينفذها:
جرّب بنفسكReact 18 يعمل في متصفحك
اضغط «تشغيل» لترى النتيجة هنا.
اضغط الزرين وراقب وحدة التحكم أسفل المعاينة.
تمرين
- أنشئ مكون
Productيأخذnameوpriceويعرضهما، مع خاصيةsaleاختيارية تضيف كلمة «تخفيض». - استخدم
childrenلصنع مكونAlertبلون أحمر.