Menu
Coddy logo textTech

הצגה באמצעות &&

חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 34 מתוך 42.

לעיתים קרובות אין else: פשוט רוצים שמשהו יופיע כאשר תנאי מתקיים. הטריק && מציג משהו או לא מציג דבר:

{unread > 0 && <span>You have {unread} new messages</span>}

איך זה עובד: && מחזיר את הצד הימני כשהצד השמאלי true, ו-React מרנדר אותו. כשהצד השמאלי false, לא מרונדר דבר. זו אופרטור התנאי המשולש בלי החלק : null:

{cond ? <X /> : null}   // זהה ל־
{cond && <X />}
challenge icon

אתגר

קל

הצג תג של תיבת הדואר הנכנס רק כשיש משהו לקרוא. הרכיב מגדיר את unread.

  1. בעזרת &&, הצג <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>
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה יסודות