Conditional Rendering في React: التحكم بعرض العناصر

في تطبيقات React، لا نعرض كل شيء دائمًا. أحيانًا نعرض زر الدخول فقط إذا لم يكن المستخدم مسجّلًا، أو نظهر رسالة تحميل ثم نستبدلها بالمحتوى الحقيقي.

هذا هو مفهوم Conditional Rendering: التحكم في عرض العناصر بناءً على شرط منطقي.

ما هو Conditional Rendering في React؟

هو أسلوب لعرض أو إخفاء عناصر حسب قيمة شرط معين. الشرط غالبًا يكون قيمة State مثل isLoggedIn أو loading.

التعريف البسيط: عرض عنصر فقط عندما تتحقق حالة معينة.

الطريقة 1: استخدام if خارج JSX

function WelcomeMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>مرحباً بك من جديد</h2>;
  }

  return <h2>من فضلك سجّل الدخول</h2>;
}

هنا استخدمنا if خارج JSX لإرجاع عنصر مختلف حسب حالة المستخدم. هذا الأسلوب واضح عندما يكون عندك منطق بسيط بفرعين فقط.

الفكرة ببساطة: إذا كان المستخدم مسجّلًا نعرض رسالة الترحيب، وإذا لم يكن مسجّلًا نعرض دعوة لتسجيل الدخول. لاحظ أننا نُعيد JSX مختلفًا حسب الشرط، وهذا يجعل المكوّن يقرر ماذا يُظهر في كل حالة.

الطريقة 2: Ternary داخل JSX

function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <span>الحساب نشط</span>
      ) : (
        <span>يرجى تسجيل الدخول</span>
      )}
    </div>
  );
}

استخدمنا الشرط الثلاثي لأنه يسمح بعرض نتيجتين مباشرة داخل JSX. مناسب عندما تريد استبدال عنصر بآخر بشكل واضح.

هنا نفس المنطق السابق لكن داخل JSX مباشرة. إذا كانت isLoggedIn تساوي true نعرض “الحساب نشط”، وإذا كانت false نعرض “يرجى تسجيل الدخول”. هذا الأسلوب عملي عندما تريد نتيجة واضحة وسريعة داخل الواجهة.

الطريقة 3: && لعرض عنصر واحد

function Notification({ hasMessage }) {
  return (
    <div>
      {hasMessage && <p>لديك رسالة جديدة</p>}
    </div>
  );
}

إذا كان الشرط false فلن يظهر أي شيء. هذا الأسلوب ممتاز عندما تريد إظهار عنصر واحد فقط بدون else.

لماذا يعمل هذا؟ لأن React يتجاهل القيم false و null. لذلك نكتب الشرط أولًا ثم العنصر المراد عرضه. إذا تحقّق الشرط يظهر العنصر، وإذا لم يتحقق فلن يظهر شيء.

الطريقة 4: إرجاع null لإخفاء المكوّن

function PromoBanner({ show }) {
  if (!show) return null;
  return <div className="promo">عرض خاص اليوم</div>;
}

إرجاع null يعني أن React لن يعرض أي شيء. هذا مفيد عندما تريد إخفاء مكوّن كامل حسب شرط.

هذا الأسلوب مناسب عندما تريد إيقاف المكوّن بالكامل. مثلًا، بانر ترويجي لا يظهر إلا في وقت محدد. بدل إضافة شرط في كل مكان، تعيد null من المكوّن نفسه.

مثال عملي: حالة تحميل

function Products({ loading, items }) {
  if (loading) {
    return <p>جارٍ التحميل...</p>;
  }

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

عند التحميل نعرض رسالة بسيطة، وبعد انتهاء التحميل نعرض القائمة. هذا النمط مهم في أي تطبيق يتعامل مع البيانات من API.

هنا نستخدم الشرط أولًا لإظهار “جارٍ التحميل...”. بمجرد انتهاء التحميل نعرض القائمة باستخدام map مع key لكل عنصر، وهذا يمنح React القدرة على تتبّع العناصر بشكل صحيح.

أخطاء شائعة

• كتابة شرط معقد داخل JSX يجعل الكود صعب القراءة.
• استخدام && مع قيم قد تكون رقمية (مثل 0) فتظهر 0 في الواجهة.
• نسيان key عند عرض قائمة بعد الشرط.

الأسئلة الشائعة — FAQ

ما هو Conditional Rendering في React؟

هو عرض أو إخفاء عناصر بناءً على شرط منطقي مثل حالة تسجيل الدخول.

متى أستخدم && بدل if؟

عندما تريد عرض عنصر واحد فقط في حالة تحقق الشرط بدون else.

ما الفرق بين if و ternary داخل JSX؟

if يُستخدم خارج JSX، بينما ternary يسمح بعرض نتيجتين مباشرة داخل JSX.

كيف أعرض رسالة أثناء التحميل؟

أنشئ حالة loading ثم اعرض رسالة عند true والمحتوى عند false.

هل يمكن إرجاع null في React؟

نعم، إرجاع null يعني عدم عرض أي شيء وهو مفيد لإخفاء عناصر حسب شرط.