العرض الشرطي الثلاثي (Ternary Rendering)

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

لا يمكن للأقواس الملتفة في JSX أن تحوي بيان if، ولكنها تتسع لـ العامل الشرطي الثلاثي (ternary operator) بشكل مثالي، وهو يغطي تقريبًا كل حالة "إما/أو" على الشاشة:

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

الشرط أولاً، ثم القيمة للحالة true، ثم القيمة للحالة false. يمكن أن يكون كلا الجانبين عناصر JSX كاملة:

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

اقرنه بالحالة (state) وستتبدل الصفحة مباشرة: اقلب القيمة البولينية (boolean)، وسيعيد React تقديم الفرع الآخر.

التحدي

سهل

أنشئ سطر حالة تسجيل الدخول.

أضف حالة منطقية (boolean) loggedIn، تبدأ بـ false.
الزر (id="login") يعكس حالتها عند كل نقرة.
الفقرة (id="status") تعرض Welcome back! عند تسجيل الدخول و Please log in بخلاف ذلك، باستخدام التعبير الشرطي الثلاثي (ternary).

جرّب بنفسك

<!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>