ה־Prop Children
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 20 מתוך 42.
מאפיין אחד הוא מיוחד. כתבו רכיב עם תגית פתיחה וגם תגית סגירה, וכל מה שתכניסו ביניהן יגיע בתור המאפיין children:
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<p>Any content!</p>
</Card>לכרטיס לא משנה ולא אכפת לו מה יש בפנים: הוא פשוט עוטף אותו בתיבה מעוצבת. רכיבים עוטפים כמו כרטיסים, חלונות מודאליים ופריסות משתמשים כולם ב־children: רכיב האב מספק את התוכן, והרכיב מספק את המסגרת.
אתגר
בינוניבנו מסגרת כרטיס לשימוש חוזר.
- גרמו ל־
Cardלהציג<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>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
2ביטויי JSX
סוגריים מסולסליםחשבון בסוגריים מסולסליםסוגריים מסולסלים במאפייניםקריאה לפונקציות ב-JSXסיכום: ביטויי JSX5מצב ואירועים
מהו מצב?מונה לחיצותסופרים בקפיצותשינוי מצב באמצעות Stateמצבים בלתי תלוייםסיכום: מצב ואירועים8פרויקט: כרטיס פרופיל
שלב 1: מבנה הכרטיסשלב 2: כרטיס עם Propsשלב 3: כפתור לייקשלב 4: הפעלה וכיבוי של מעקב