ตัวดำเนินการเงื่อนไขใน JSX

อย่างที่คุณทราบแล้ว ภายในเครื่องหมายปีกกา เราสามารถรันโค้ด JavaScript ได้ ที่จริงแล้วโค้ดนี้ ไม่ใช่โค้ดอะไรก็ได้ แต่เป็นแค่โค้ดแบบพื้นฐานที่สุดเท่านั้น

โดยเฉพาะอย่างยิ่ง เราไม่สามารถใช้เงื่อนไข if ในนั้นได้ แทนที่ควรใช้รูปแบบเงื่อนไขแบบย่อ

ลองแสดงข้อความหนึ่งหรืออีกข้อความหนึ่ง ขึ้นอยู่กับค่าของค่าคงที่ show โดยใช้ ตัวดำเนินการเงื่อนไข:

function App() {
	const show = true;
	
	return <div>
		{show ? 'text1' : 'text2'}
	</div>;
}

สามารถทำงานได้ไม่เพียงแค่กับข้อความ แต่ยังรวมถึง กับแท็กด้วย:

function App() {
	const show = true;
	
	return <div>
		{show ? <p>text1</p> : <p>text2</p>}
	</div>;
}

ให้โค้ดต่อไปนี้:

function App() {
	const age = 19;
	
	return <div>
		
	</div>;
}

หากใน age มีค่ามากกว่า 18 ปี ให้แสดงย่อหน้าพร้อมข้อความหนึ่งแก่ผู้ใช้ในข้อความของแท็ก div และหากน้อยกว่า - ให้แสดง พร้อมอีกข้อความหนึ่ง