انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: العرض الشرطي للعناصر في React

Early Return with if else الإرجاع المبكر بجملة if

تحكّم ديناميكياً في إظهار عناصر واجهة React وإخفائها عبر الإرجاع المبكر بجملة if والمعامل الثلاثي والعرض الشرطي الآمن وإرجاع null وتجنب طباعة الصفر.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما يتغير مخرج المكون بالكامل بناءً على شرط أولي، مثل درس مقفل أو عدم توفر سجل المستخدم بعد، اكتب جملة إرجاع مبكر (Early Return) باستخدام if في بداية دالة المكون قبل جملة الإرجاع الرئيسية؛ مما يحافظ على نظافة شجرة JSX الأساسية دون تداخل معقد.

الصف 2 كود برمجي
HTML 
function LessonAccessCard({ title, isUnlocked }) {
  if (!isUnlocked) {
    return <p className="rx-card">Locked: {title}</p>;
  }
  return (
    <div className="rx-card">
      <h3>{title} — Ready</h3>
    </div>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (العرض الشرطي للعناصر في React)