فهم العرض الشرطي في React (دليل ٢٠٢٥)

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

العامل المنطقي AND (&&) Operator

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

function Greeting({ isLoggedIn }) {
  return (
    <div>
      <h1>Welcome to React!</h1>
      {isLoggedIn && <p>You are logged in.</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 true, سيتم عرض “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 (مخطط تدفق يظهر منطق التفرع).

البدائل الحديثة (٢٠٢٥+)

مع React 18 وما بعده:

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

مثال مع إرجاع مبكر:

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

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

الخاتمة

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

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