خاصيتان (Two Props)
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 18 من 42.
تأخذ المكونات بانتظام عدة props. أدرجها جميعًا في التفكيك (destructuring) واخلطها داخل الـ jsx:
function Product({ name, price }) {
return <p>{name} costs ${price}</p>;
}
<Product name="Laptop" price={999} />
// renders: Laptop costs $999لاحظ الأنواع: name هو نص (بين علامات تنصيص)، و price هو رقم (بين أقواس مجعدة). الحفاظ على الأرقام كأرقام أمر مهم في اللحظة التي تجري فيها عمليات حسابية باستخدامها.
التحدي
سهلقم ببناء خط إنتاج للمتجر.
- اجعل
Productيستقبل الخصائص (props)nameوpriceويعرض{name} costs ${price}داخل فقرة (paragraph). - في App، قم بعرض Product واحد مع name يساوي
Laptopو price يساوي999(كرقم!). يجب أن تعرض الصفحةLaptop costs $999.
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
4الـ Props
ما هي الـ Props؟تمرين تمرير الـ Propsخاصيتان (Two Props)المكون نفسه، بيانات جديدةخاصية Children Propملخص: الـ Props2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة