JSX สามารถแสดงผล นิพจน์ JavaScript ใดๆ ได้ ดังนั้นการแสดงผลแบบมีเงื่อนไขเป็นเพียง JS ปกติที่ใช้ภายใน { }
jsx
() {
(
);
}
JSX สามารถแสดงผล นิพจน์ JavaScript ใดๆ ได้ ดังนั้นการแสดงผลแบบมีเงื่อนไขเป็นเพียง JS ปกติที่ใช้ภายใน { }
() {
(
);
}
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).
เมื่อลอจิกซับซ้อน ให้คำนวณองค์ประกอบ ก่อน return เพื่อให้อ่านง่ายขึ้น:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
สิ่งนี้ช่วยให้ JSX เรียบเรียงและลอจิกการตัดสินใจชัดเจน.