العرض باستخدام &&

جزء من قسم الأساسيات في رحلة React على Coddy. الدرس 34 من 42.

غالبًا لا يوجد else: كل ما تريده هو ظهور شيء ما عندما يتحقق شرط. تتولى && حيلة العرض أو عدم عرض أي شيء:

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

كيف يعمل: يُعيد && الجانب الأيمن عندما تكون القيمة في الجانب الأيسر صحيحة، ويعرضه React. عندما تكون القيمة في الجانب الأيسر خاطئة، لا يُعرَض شيء. عند وجود قيمة منطقية في الجانب الأيسر، فهذا هو التعبير الشرطي الثلاثي بعد حذف : null منه:

{cond ? <X /> : null}   // مكافئ لما يلي
{cond && <X />}

لهذا السبب يتحقق المثال من unread > 0. عند استخدام {unread && <span>...</span>} وكانت قيمة unread تساوي 0، يُعيد && القيمة 0 ويعرضها React على الصفحة.

التحدي

سهل

أظهر شارة صندوق الوارد فقط عندما يكون هناك شيء لقراءته. يعرّف المكوّن 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>