الواجهات الحقيقية يتغيّر شكلها مع البيانات. يعرض Watchlist شارة «Watched» على بعض الأفلام دون غيرها، ورسالة مشجّعة حين تكون القائمة فارغة، وزر Add معطّلًا حتى تكتب عنوانًا. لا شيء من هذا يحتاج إلى صياغة خاصة في React. إنها JavaScript عادية تقرّر أي JSX تُرجع، وهناك ثلاث أدوات لذلك.
\nحين يعرض الـ component شيئًا مختلفًا تمامًا في حالة ما، عالج تلك الحالة أولًا ثم أرجِع:
\nexport default function MovieList({ movies }) {\n if (movies.length === 0) {\n return <p className=\"empty\">Nothing to watch yet. Add a movie above.</p>;\n }\n\n return (\n <ul>\n {movies.map((movie) => (\n <li key={movie.id}>{movie.title}</li>\n ))}\n </ul>\n );\n}تُعالَج الحالة الفارغة في سطرين، ولا يهتمّ بقية الدالة إلا بالحالة العادية. هذا هو النمط الأسهل قراءة، فابدأ به أولًا. (الـ map والـ key موضوع الدرس التالي.)
ويمكن للـ component أيضًا أن يُرجع null كي لا يعرض شيئًا على الإطلاق:
function WatchedBadge({ watched }) {\n if (!watched) return null;\n return <span className=\"badge\">Watched</span>;\n}داخل JSX، حيث لا يمكنك كتابة if، استخدم المعامل الشرطي للاختيار بين مخرجين:
<p className=\"status\">\n {movie.watched ? 'Watched' : 'To watch'}\n</p>ويعمل مع العناصر أيضًا: {isEditing ? <TitleInput /> : <h2>{title}</h2>}. أبقِ المعاملات الثلاثية قصيرة. وحين تضع معاملًا ثلاثيًا داخل آخر، أو يمتدّ كل فرع إلى عدّة أسطر، انقل القرار إلى متغيّر فوق return، أو إلى component صغير خاص به.
&&: شيء أو لا شيءحين يكون البديل «لا شيء»، يكون معامل AND المنطقي أقصر من معامل ثلاثي مع null:
<li>\n {movie.title}\n {movie.watched && <span className=\"badge\">Watched</span>}\n</li>تحسب JavaScript التعبير a && b على أنه a إن كانت a قيمة falsy، وإلا فهو b. حين تكون movie.watched قيمتها false، يصبح التعبير false، ولا تعرض React شيئًا مقابل false. وحين تكون true، تحصل على الشارة.
الشروط لا تخصّ العناصر الكاملة فقط، فالخصائص تأخذ تعبيرات أيضًا:
\n<li className={movie.watched ? 'movie movie-watched' : 'movie'}>\n {movie.title}\n</li>\n\n<button disabled={title.trim() === ''}>Add</button>\n\n<button aria-pressed={filter === 'watched'}>Watched</button>الثالثة مهمّة لإمكانية الوصول (accessibility): تُخبر aria-pressed مستخدمي الـ screen reader أي زر تبديل هو النشط، وهو ما لا يكفي تغيير اللون وحده لإيصاله. وحين تكون قيمة خاصية منطقية مثل disabled هي false أو null، لا تضعها React على العنصر.
الأنماط الثلاثة تُنتج النوع نفسه من النتائج، فالاختيار مسألة سهولة قراءة. هذه قاعدة عامة تصمد جيدًا في مراجعات الكود:
\n&& مع قيمة منطقية حقيقية على اليسار.حين تلاحظ أنك تكتب معاملًا ثلاثيًا داخل آخر، أو سلسلة && بثلاثة شروط، توقّف وامنح المنطق اسمًا. إمّا أن تحسب متغيّرًا (const status = …) فوق return، وإمّا أن تستخرج component صغيرًا مثل WatchedBadge يُخفي القرار بداخله. عندها يُقرأ الأب كجملة: عنوان، شارة، أزرار.
والترتيب مهمّ مع الـ return المبكر أيضًا. ضع أولًا الحالات التي تجعل البقية مستحيلة. إذا كانت قائمة الأفلام قد تكون قيد التحميل أو فاشلة أو فارغة، فافحصها بهذا الترتيب، كي لا يتعامل الـ return الأخير إلا مع بيانات حقيقية.
هناك فرق مهمّ بين هذين:
\n{showWatched && <WatchedPanel />}\n<div hidden={!showWatched}>\n <WatchedPanel />\n</div>الأول يزيل WatchedPanel من الشجرة حين يكون الشرط false. تُلغي React تركيبه (unmount): يذهب الـ DOM الخاص به، ويُهدم أي state بداخله، مثل النص المكتوب في حقل. وحين يعود، يبدأ من الصفر. أمّا الثاني فيُبقيه مركّبًا ولا يُخفي إلا غلافه (الخاصية hidden في HTML تعمل مثل display: none)، فيبقى الـ state.
في أغلب الأحيان تريد الأول؛ لا داعي لإبقاء واجهة غير مرئية حيّة. اختر الإخفاء حين يتوقّع المستخدم أن يبقى عمله الجاري داخل الجزء المخفي، كما في التبويبات التي فيها نماذج نصف معبّأة.
\n\nفي الدرس التالي تعرض قائمة الأفلام كاملة من البيانات باستخدام map، وتتعلّم لماذا تطلب منك React باستمرار key.
return مبكرًا للشاشات البديلة الكاملة، والمعامل الثلاثي للاختيار بين شيئين، و&& لشيء أو لا شيء.","يمكن للـ component أن يُرجع null كي لا يعرض شيئًا على الإطلاق.","الكود {count && <List />} يعرض 0 حرفيًا حين تكون count صفرًا؛ قارن صراحةً بـ count > 0 &&.","يمكن للشروط أن تتحكّم في الخصائص أيضًا، مثل className وdisabled وaria-pressed.","عدم عرض component يزيله ويزيل الـ state الخاص به؛ أمّا إخفاؤه بـ CSS فيُبقي الاثنين."],"further":[{"title":"Conditional Rendering","url":"https://react.dev/learn/conditional-rendering"},{"title":"Logical AND (&&) on MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND"}],"quiz":[{"q":"المصفوفة movies فارغة. ماذا يعرض <div>{movies.length && <MovieList movies={movies} />}</div>؟
&& يُرجع الطرف الأيسر حين تكون قيمته falsy، والطرف الأيسر هنا هو الرقم 0."},{"text":"قائمة فارغة.","why":"لا يُرسم MovieList أبدًا، لأن 0 && … يتوقّف عند 0."},{"text":"خطأ بخصوص عرض رقم.","why":"الأرقام أبناء صالحة في React، ولهذا بالضبط يظهر الـ 0 بدلًا من الخطأ."},{"text":"الحرف “0”.","why":"صحيح. 0 && x تساوي 0، وReact تعرض الأرقام كنص. اكتب movies.length > 0 && … بدلًا من ذلك."}],"answer":3},{"q":"يجب أن يعرض MovieList رسالة كاملة «Nothing to watch yet» حين تكون القائمة فارغة، ويعرض القائمة في غير ذلك. أيّ بنية هي الأسهل قراءة؟
if (movies.length === 0) return <EmptyState />; يليه الـ markup العادي للقائمة.","why":"صحيح. تُعالَج الحالة الفارغة وينتهي أمرها، ولا يتعامل بقية الدالة إلا مع الحالة العادية، بلا تداخل."},{"text":"معامل ثلاثي يغلّف كل الـ JSX في الـ component، مع معامل ثلاثي آخر متداخل داخله لشارة كل عنصر.","why":"يعمل، لكن المعاملات الثلاثية المتداخلة داخل كتل JSX كبيرة صعبة القراءة وسهلة الكسر عند التعديل."},{"text":"اعرض الاثنين وأخفِ الخاطئ منهما بـ style={{ display: 'none' }}.","why":"تبقى الشجرتان مركّبتين وتعملان، وصار لديك مكانان يجب إبقاؤهما متزامنين. اعرض ما تحتاجه فقط."}],"answer":0},{"q":"يجب ألّا يعرض WatchedBadge شيئًا حين تكون watched قيمتها false. أيّ نسخة تفعل ذلك؟
if (!watched) return; ولا شيء آخر لهذه الحالة","why":"الـ return المجرّد يُرجع undefined. يقبله React 19، لكن return null يصرّح بالنية بوضوح، وهو العُرف الذي ستراه في كل مكان."},{"text":"if (!watched) return <></>;","why":"الـ fragment الفارغ لا يعرض شيئًا أيضًا، لكنه أكثر ضجيجًا من العُرف return null."},{"text":"if (!watched) return null;","why":"صحيح. إرجاع null هو الطريقة المعيارية والصريحة لكي لا يعرض الـ component شيئًا."},{"text":"if (!watched) return false;","why":"الـ component الذي يُرجع false لا يعرض شيئًا مصادفةً، لكنه يبدو كخطأ. أرجِع null."}],"answer":2},{"q":"تحتوي لوحة «Watched» القابلة للطيّ على حقل نصي. كتب المستخدم ملاحظة، ثم طوى اللوحة عبر {open && <Panel />}، ثم فتحها مجددًا. ماذا حدث للملاحظة؟
Nothing to watch yet.
;\n }\n\n return (\nفي MovieList ثلاثة أخطاء. أصلحها بحيث:
<span className="badge">Watched</span>) فقط على الأفلام التي قيمة watched فيها true.movies فارغة، تعرض القائمة الرسالة Nothing to watch yet. بدلًا من قائمة.يرسم App القائمة مرتين، مرة بثلاثة أفلام ومرة بلا أفلام. لا تغيّر App.
movies.length && … حين يكون الطول 0.","عالج الحالة الفارغة أولًا بـ return مبكر: if (movies.length === 0) return <p>…</p>;","للشارة، استخدم {movie.watched && <span className="badge">Watched</span>}."],"explanation":"يعالج الـ return المبكر القائمة الفارغة بالكامل، فيزيل التعبير movies.length && … وصفره الشارد بخطوة واحدة. أمّا في الشارة، فالتعبير movie.watched && <span>…</span> آمن لأن watched قيمة منطقية: حين تكون false لا تعرض React شيئًا. احتفظ بـ && للقيم المنطقية؛ وحين يكون الطرف الأيسر رقمًا، قارنه صراحةً (length > 0).