خاصية Children Prop
جزء من قسم الأساسيات في رحلة React على Coddy. الدرس 20 من 42.
هناك خاصية (prop) واحدة مميزة. اكتب مكونًا مع وسم بداية ووسم إغلاق، وأي شيء تضعه بينهما سيصل كخاصية children:
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<p>Any content!</p>
</Card>لا يعرف المكون Card ولا يهتم بما يوجد بداخله: فهو مجرد إطار يغلفه داخل مربع ذو تنسيق محدد. المكونات المغلفة (Wrappers) مثل البطاقات والنافذة المنبثقة (modals) والتخطيطات تستخدم جميعها children: يوفر المكون الأب المحتوى، بينما يوفر المكون نفسه الإطار.
التحدي
متوسطقم ببناء إطار بطاقة (card) قابل لإعادة الاستخدام.
- اجعل
Cardيقوم بعملrenderلـ<div>معclassName="card"يعرضchildrenالخاصة به. - في App، استخدم
<Card>...</Card>لتغليف<p>يحملid="card-text"والنصWelcome aboard.
جرّب بنفسك
<!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: تبديل المتابعة