تمرين تمرير الـ Props
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 17 من 42.
دعنا نربط الـ prop من البداية إلى النهاية. ثلاث خطوات، وهي دائمًا نفسها:
// 1. استقبله
function Greeting({ name }) {
// 2. استخدمه
return <p>Hello, {name}!</p>;
}
// 3. مرره
<Greeting name="Ada" />يتم تمرير النصوص بين علامتي تنصيص. أما الأرقام والتعبيرات فتستخدم الأقواس المعقوفة، وهي نفس القاعدة المستخدمة مع الخصائص:
<Score points={97} />
التحدي
مبتدئيتجاهل المكون Greeting كل ما تقوم بتمريره إليه.
- اجعل
Greetingيستقبل خاصيه (prop) باسمnameويقوم بعرضHello, {name}!داخل الفقرة الخاصة به. - في App، قم بتمرير
name="Ada"حتى تعرض الصفحةHello, Ada!.
جرّب بنفسك
<!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: تبديل المتابعة