العرض باستخدام &&
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 34 من 42.
غالباً لا يكون هناك else: فأنت تريد فقط أن يظهر شيء ما عندما يتحقق شرط معين. تتعامل حيلة
&& مع حالة العرض-أو-لا-شيء:{unread > 0 && <span>You have {unread} new messages</span>}كيف يعمل ذلك: && يعيد الطرف الأيمن عندما يكون الطرف الأيسر true، ويقوم React بـ render له. عندما يكون الطرف الأيسر false، لا يتم render لأي شيء. إنها عبارة عن المُنَفِّذ الثلاثي (ternary) مع اقتطاع : 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>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
4الـ Props
ما هي الـ Props؟تمرين تمرير الـ Propsخاصيتان (Two Props)المكون نفسه، بيانات جديدةخاصية Children Propملخص: الـ Props7الشروط والمصفوفات
العرض الشرطي الثلاثي (Ternary Rendering)العرض باستخدام &&عرض قائمةأهمية المفاتيح (Keys)التصفية ثم التعيين (Filter, Then Map)ملخص: الشروط والمصفوفات2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة