---
title: فهم العرض الشرطي في React (دليل 2025)
description: تعلم كيفية تنفيذ العرض الشرطي في React باستخدام العوامل المنطقية، والتعبيرات الثلاثية، وأفضل الممارسات لقابلية القراءة والصيانة.
url: https://nerdleveltech.com/ar/react-conditional-rendering-2025
language: ar
date: '2025-09-15'
updated: '2025-09-15'
category: frontend
tags:
  - React
  - JavaScript
  - Conditional Rendering
  - Frontend
markdown_url: https://nerdleveltech.com/ar/react-conditional-rendering-2025.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/ar/react-conditional-rendering-2025'
terms: https://nerdleveltech.com/llms.txt
---

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

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

---

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

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

```jsx
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`)

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

```jsx
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` في المكون الخاص بك:

```jsx
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`:

```jsx
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 وما بعده:

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

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

```jsx
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` للسيناريوهات الأكثر تعقيدًا.

---