يمكن لـ JSX عرض أي تعبير JavaScript، لذا فإن العرض المشروط هو مجرد JavaScript عادي يُستخدم داخل { }.
jsx
() {
(
);
}
يمكن لـ JSX عرض أي تعبير JavaScript، لذا فإن العرض المشروط هو مجرد JavaScript عادي يُستخدم داخل { }.
() {
(
);
}
cond && <X/> — عرض <X/> عندما يكون cond قيمة صحيحة، وإلا لا شيء. مثالي لـ "إظهار أو إخفاء".cond ? <A/> : <B/> — الاختيار بين فرعين.null لعدم عرض أي شيء على الإطلاق.&& مع الأرقام{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
يحدث هذا لأن 0 && x يُقيّم إلى 0، و React تعرض الرقم 0 (لكن ليس false/null/undefined).
عندما تصبح المنطق معقدة، احسب العنصر قبل الإرجاع لتحسين القراءة:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
هذا يحافظ على JSX مسطحة وتكون منطق القرار واضحة.