הצגה באמצעות &&
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 34 מתוך 42.
לעיתים קרובות אין else: פשוט רוצים שמשהו יופיע כאשר תנאי מתקיים. הטריק && מציג משהו או לא מציג דבר:
{unread > 0 && <span>You have {unread} new messages</span>}איך זה עובד: && מחזיר את הצד הימני כשהצד השמאלי true, ו-React מרנדר אותו. כשהצד השמאלי false, לא מרונדר דבר. זו אופרטור התנאי המשולש בלי החלק : null:
{cond ? <X /> : null} // זהה ל־
{cond && <X />}אתגר
קלהצג תג של תיבת הדואר הנכנס רק כשיש משהו לקרוא. הרכיב מגדיר את unread.
- בעזרת
&&, הצג<span>עםid="badge"והטקסט3 new messages(בנה את המספר מהמשתנה!), אבל רק כאשרunreadגדול מ־0.
נסו בעצמכם
<!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>השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
7תנאים ורשימות
רינדור עם אופרטור תנאיהצגה באמצעות &&רינדור של רשימהלמפתחות יש חשיבותסינון ואז מיפויסיכום: תנאים ורשימות2ביטויי JSX
סוגריים מסולסליםחשבון בסוגריים מסולסליםסוגריים מסולסלים במאפייניםקריאה לפונקציות ב-JSXסיכום: ביטויי JSX5מצב ואירועים
מהו מצב?מונה לחיצותסופרים בקפיצותשינוי מצב באמצעות Stateמצבים בלתי תלוייםסיכום: מצב ואירועים8פרויקט: כרטיס פרופיל
שלב 1: מבנה הכרטיסשלב 2: כרטיס עם Propsשלב 3: כפתור לייקשלב 4: הפעלה וכיבוי של מעקב