العرض الشرطي الثلاثي (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>