العرض الشرطي

الواجهات الحقيقية يتغيّر شكلها مع البيانات. يعرض Watchlist شارة «Watched» على بعض الأفلام دون غيرها، ورسالة مشجّعة حين تكون القائمة فارغة، وزر Add معطّلًا حتى تكتب عنوانًا. لا شيء من هذا يحتاج إلى صياغة خاصة في React. إنها JavaScript عادية تقرّر أي JSX تُرجع، وهناك ثلاث أدوات لذلك.

الـ return المبكر: بدائل كاملة

حين يعرض الـ component شيئًا مختلفًا تمامًا في حالة ما، عالج تلك الحالة أولًا ثم أرجِع:

export default function MovieList({ movies }) {
  if (movies.length === 0) {
    return <p className="empty">Nothing to watch yet. Add a movie above.</p>;
  }

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

تُعالَج الحالة الفارغة في سطرين، ولا يهتمّ بقية الدالة إلا بالحالة العادية. هذا هو النمط الأسهل قراءة، فابدأ به أولًا. (الـ map والـ key موضوع الدرس التالي.)

ويمكن للـ component أيضًا أن يُرجع null كي لا يعرض شيئًا على الإطلاق:

function WatchedBadge({ watched }) {
  if (!watched) return null;
  return <span className="badge">Watched</span>;
}

المعامل الثلاثي: هذا أو ذاك

داخل JSX، حيث لا يمكنك كتابة if، استخدم المعامل الشرطي للاختيار بين مخرجين:

<p className="status">
  {movie.watched ? 'Watched' : 'To watch'}
</p>

ويعمل مع العناصر أيضًا: {isEditing ? <TitleInput /> : <h2>{title}</h2>}. أبقِ المعاملات الثلاثية قصيرة. وحين تضع معاملًا ثلاثيًا داخل آخر، أو يمتدّ كل فرع إلى عدّة أسطر، انقل القرار إلى متغيّر فوق return، أو إلى component صغير خاص به.

الـ &&: شيء أو لا شيء

حين يكون البديل «لا شيء»، يكون معامل AND المنطقي أقصر من معامل ثلاثي مع null:

<li>
  {movie.title}
  {movie.watched && <span className="badge">Watched</span>}
</li>

تحسب JavaScript التعبير a && b على أنه a إن كانت a قيمة falsy، وإلا فهو b. حين تكون movie.watched قيمتها false، يصبح التعبير false، ولا تعرض React شيئًا مقابل false. وحين تكون true، تحصل على الشارة.

الشروط في الخصائص

الشروط لا تخصّ العناصر الكاملة فقط، فالخصائص تأخذ تعبيرات أيضًا:

<li className={movie.watched ? 'movie movie-watched' : 'movie'}>
  {movie.title}
</li>

<button disabled={title.trim() === ''}>Add</button>

<button aria-pressed={filter === 'watched'}>Watched</button>

الثالثة مهمّة لإمكانية الوصول (accessibility): تُخبر aria-pressed مستخدمي الـ screen reader أي زر تبديل هو النشط، وهو ما لا يكفي تغيير اللون وحده لإيصاله. وحين تكون قيمة خاصية منطقية مثل disabled هي false أو null، لا تضعها React على العنصر.

اختيار الأداة المناسبة

الأنماط الثلاثة تُنتج النوع نفسه من النتائج، فالاختيار مسألة سهولة قراءة. هذه قاعدة عامة تصمد جيدًا في مراجعات الكود:

• المخرجات كلها تتغيّر (تحميل، خطأ، فراغ، عادي): return مبكر، حالة واحدة في كل مرة، من الأعلى إلى الأسفل.
• موضع واحد يتبدّل بين شيئين: معامل ثلاثي، بسطر أو اثنين لكل فرع.
• موضع واحد إمّا موجود وإمّا لا: && مع قيمة منطقية حقيقية على اليسار.

حين تلاحظ أنك تكتب معاملًا ثلاثيًا داخل آخر، أو سلسلة && بثلاثة شروط، توقّف وامنح المنطق اسمًا. إمّا أن تحسب متغيّرًا (const status = …) فوق return، وإمّا أن تستخرج component صغيرًا مثل WatchedBadge يُخفي القرار بداخله. عندها يُقرأ الأب كجملة: عنوان، شارة، أزرار.

والترتيب مهمّ مع الـ return المبكر أيضًا. ضع أولًا الحالات التي تجعل البقية مستحيلة. إذا كانت قائمة الأفلام قد تكون قيد التحميل أو فاشلة أو فارغة، فافحصها بهذا الترتيب، كي لا يتعامل الـ return الأخير إلا مع بيانات حقيقية.

عدم العرض مقابل الإخفاء

هناك فرق مهمّ بين هذين:

{showWatched && <WatchedPanel />}
<div hidden={!showWatched}>
  <WatchedPanel />
</div>

الأول يزيل WatchedPanel من الشجرة حين يكون الشرط false. تُلغي React تركيبه (unmount): يذهب الـ DOM الخاص به، ويُهدم أي state بداخله، مثل النص المكتوب في حقل. وحين يعود، يبدأ من الصفر. أمّا الثاني فيُبقيه مركّبًا ولا يُخفي إلا غلافه (الخاصية hidden في HTML تعمل مثل display: none)، فيبقى الـ state.

في أغلب الأحيان تريد الأول؛ لا داعي لإبقاء واجهة غير مرئية حيّة. اختر الإخفاء حين يتوقّع المستخدم أن يبقى عمله الجاري داخل الجزء المخفي، كما في التبويبات التي فيها نماذج نصف معبّأة.

في الدرس التالي تعرض قائمة الأفلام كاملة من البيانات باستخدام map، وتتعلّم لماذا تطلب منك React باستمرار key.