שני Props
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 18 מתוך 42.
רכיבים מקבלים בדרך כלל כמה props. רשמו את כולם בפירוק והרכיבו אותם בתוך JSX:
function Product({ name, price }) {
return <p>{name} costs ${price}</p>;
}
<Product name="Laptop" price={999} />
// מרנדר: Laptop costs $999שימו לב לסוגים: name הוא מחרוזת (מירכאות), price הוא מספר (סוגריים מסולסלים). חשוב לשמור מספרים כמספרים ברגע שמבצעים איתם חישובים.
אתגר
קלבנו קו מוצרים עבור החנות.
- גרמו ל-
Productלקבל את ה-propsnameו-priceולהציג בפסקה שלו את{name} costs ${price}. - ב-
App, הציגוProductאחד עם השםLaptopוהמחיר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>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
2ביטויי JSX
סוגריים מסולסליםחשבון בסוגריים מסולסליםסוגריים מסולסלים במאפייניםקריאה לפונקציות ב-JSXסיכום: ביטויי JSX5מצב ואירועים
מהו מצב?מונה לחיצותסופרים בקפיצותשינוי מצב באמצעות Stateמצבים בלתי תלוייםסיכום: מצב ואירועים8פרויקט: כרטיס פרופיל
שלב 1: מבנה הכרטיסשלב 2: כרטיס עם Propsשלב 3: כפתור לייקשלב 4: הפעלה וכיבוי של מעקב