ใน React การเรนเดอร์แบบมีเงื่อนไขหมายถึงการเรนเดอร์ภายใต้เงื่อนไขที่ระบุ จะไม่มีการดำเนินการเรนเดอร์ กล่าวคือ เนื้อหาของอินเทอร์เฟซจะแสดงเนื้อหาที่แตกต่างกันไปตามสถานการณ์ที่แตกต่างกัน หรือตัดสินใจว่าจะเรนเดอร์บางส่วนหรือไม่ ของเนื้อหา ตอบสนองวิธีการเรนเดอร์แบบมีเงื่อนไข: 1. คำสั่งการตัดสินแบบมีเงื่อนไขเหมาะสำหรับสถานการณ์ที่มีตรรกะมากกว่า 2. ตัวดำเนินการแบบไตรภาคเหมาะสำหรับสถานการณ์ที่มีตรรกะค่อนข้างง่าย 3. และตัวดำเนินการ "&&" เหมาะสำหรับการเรนเดอร์รายการบางอย่างหากเงื่อนไขเป็นจริง ส่วนประกอบ ถ้าไม่ตรงตามเงื่อนไข จะไม่มีอะไรแสดงผล
สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows7, เวอร์ชัน react18, คอมพิวเตอร์ Dell G3
การเรนเดอร์แบบมีเงื่อนไขตามชื่อหมายถึง หมายถึง "การเรนเดอร์ภายใต้เงื่อนไขบางประการ" และ "การไม่เรนเดอร์ภายใต้เงื่อนไขอื่น" ซึ่งเป็นสถานการณ์สมมติแบบ if-else ทั่วไป
ในบางกรณี เนื้อหาของอินเทอร์เฟซจะแสดงเนื้อหาที่แตกต่างกันตามสถานการณ์ที่แตกต่างกัน หรือตัดสินใจว่าจะแสดงเนื้อหาบางส่วนหรือไม่:
ใน vue เราจะควบคุมมันผ่านคำแนะนำ เช่น v-if, v-show; ใน React การตัดสินแบบมีเงื่อนไขทั้งหมดจะสอดคล้องกับโค้ด JavaScript ทั่วไปวิธีการทั่วไปในการแสดงผลแบบมีเงื่อนไขมีอะไรบ้าง
วิธีที่ 1: คำแถลงการตัดสินแบบมีเงื่อนไข
เหมาะกับสถานการณ์ที่มีตรรกะมากกว่า
วิธีที่ 2: ตัวดำเนินการแบบไตรภาค
เหมาะสำหรับตรรกะที่ค่อนข้างง่าย
วิธีที่ 3: และตัวดำเนินการ &&
เหมาะสำหรับการเรนเดอร์ส่วนประกอบบางอย่างหากเงื่อนไขเป็นจริง หากเงื่อนไขไม่เป็นความจริง จะไม่มีสิ่งใดถูกเรนเดอร์
