فهم العرض المشروط في React (دليل 2025)

العرض الشرطي هو مبدأ أساسي في React يسمح للمكونات بعرض عناصر مختلفة بناءً على شرط معين. فكر فيه كطريقة React للقول: “إذا كان هذا الشرط صحيحًا، فقم بالعرض؛ وإلا، فقم بعرض شيء آخر.”

---

مشغل AND المنطقي (&&)

مشغل AND المنطقي مفيد عندما تريد عرض شيء فقط إذا كان الشرط صحيحًا.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      <h1>مرحبًا بكم في React!</h1>
      {isLoggedIn && <p>أنت مسجل الدخول.</p>}
    </div>
  );
}

• إذا كان isLoggedIn هو true, فسيقوم React بعرض عنصر <p>.
• إذا كان isLoggedIn هو false, فلن يتم عرض أي شيء.

⚠️ نصيحة: كن حذرًا عند استخدام الأرقام مع &&. على سبيل المثال، 0 && <p>Text</p> سيعرض 0, وهو ما قد لا يكون ما تتوقعه.

➡️ الصورة المقترحة: /images/React-conditional-rendering-and-example.png (لقطة شاشة للرمز + الناتج).

---

مشغل الشرط الثلاثي (condition ? trueCase : falseCase)

أفضل استخدام للمشغل الثلاثي هو عندما تريد اختيار بين خيارين.

function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

• إذا كان isLoggedIn صحيحًا، فسيتم عرض “Welcome back!”.
• خلاف ذلك، سيتم عرض “Please log in.”.

👉 أفضل ممارسة: استخدم العوامل الثلاثية فقط لـ حالتين اثنتين. إذا وجدت نفسك تُدمج عوامل ثلاثية متعددة، فاستبدلها بـ if...else أو switch لتحسين قابلية القراءة.

➡️ الصورة المقترحة: /images/React-conditional-rendering-ternary-example.png (كود العامل الثلاثي والنتيجة جنبًا إلى جنب).

---

if...else و switch

للمعالجات الأكثر تعقيدًا، اتعامل مع المنطق قبل عبارة return في مكونك:

function AccessLevel({ role }) {
  let message;

  if (role === "admin") {
    message = "You have full access.";
  } else if (role === "editor") {
    message = "You can edit content.";
  } else {
    message = "View-only access.";
  }

  return <p>{message}</p>;
}

أو باستخدام switch:

function AccessLevel({ role }) {
  switch (role) {
    case "admin":
      return <p>You have full access.</p>;
    case "editor":
      return <p>You can edit content.</p>;
    default:
      return <p>View-only access.</p>;
  }
}

➡️ الصورة المقترحة: /images/React-conditional-rendering-if-switch.png (مخطط تدفق يُظهر المنطق التفرعي).

---

البدائل الحديثة (2025+)

مع React 18 ووراء:

• استخدم الإرجاع المبكر لتبسيط العرض الشرطي.
• دمجها مع الترابط الاختياري (?.) للوصول الآمن إلى الخصائص المُتداخلة بعمق.
• استفد من تركيب المكونات لتجنب الشروط المتداخلة بعمق.

مثال باستخدام الإرجاع المبكر:

function Profile({ user }) {
  if (!user) {
    return <p>Loading...</p>;
  }
  return <h2>{user.name}</h2>;
}

➡️ الصورة المقترحة: /images/React-conditional-rendering-early-return.png (لقطة شاشة لرمز بسيط + واجهة "جارٍ التحميل...").

---

الخاتمة

العرض الشرطي هو حجر الزاوية في تطوير React.

• استخدم && للتحققات البسيطة ذات الاتجاه الواحد.
• استخدم الشرط الثلاثي لخيارين.
• استخدم if/else أو switch للسيناريوهات الأكثر تعقيدًا.

---