การเรนเดอร์แบบมีเงื่อนไขเป็นหนึ่งในวิธีที่ใช้บ่อยที่สุดใน React เมื่อแอปพลิเคชันเติบโตขึ้นและสิ่งต่าง ๆ มีความซับซ้อน คำสั่งการแสดงผลตามเงื่อนไขอาจอ่านได้น้อยลง ในบทความนี้ เราจะพูดถึงวิธีการเขียนเงื่อนไขที่สวยงามใน React อย่างง่ายดาย

เทคนิคการแสดงผลตามเงื่อนไขทั่วไป

นี่เป็นเทคนิคบางอย่างที่ใช้ในขณะที่ใช้การเรนเดอร์แบบมีเงื่อนไขในส่วนประกอบ React:

โดยใช้ &&

เป็นหนึ่งในเทคนิคที่ใช้บ่อยที่สุดสำหรับการแสดงเงื่อนไข สิ่งสำคัญคือต้องจำไว้ว่าควรใช้เทคนิคนี้อย่างระมัดระวังเนื่องจากอาจนำไปสู่จุดบกพร่องที่คาดเดาไม่ได้

การใช้คำสั่ง If/Else

อีกเทคนิคหนึ่งสำหรับการแสดงเงื่อนไขใน React คือการใช้คำสั่ง if/else ซึ่งอาจส่งผลให้เกิดรหัสคอมโพเนนต์ที่ซับซ้อนเมื่อมีหลายเงื่อนไขให้ตรวจสอบ

การใช้ตัวดำเนินการแบบไตรภาค

ตัวดำเนินการ ternary เป็นเทคนิคยอดนิยมที่ใช้สำหรับการแสดงเงื่อนไขใน React ปัญหาในการใช้ตัวดำเนินการ ternary คือเมื่อคุณมีหลายเงื่อนไขที่ต้องตรวจสอบ ซึ่งจะนำไปสู่การใช้ตัวดำเนินการ ternary ที่ซ้อนกัน ทำให้โค้ดอ่านง่ายและซับซ้อนน้อยลง

การเขียนเงื่อนไขที่สะอาด

ขอ แนะนำองค์ประกอบ React ที่เรียบง่ายและมีขนาดเล็กที่ช่วยให้คุณเขียนเงื่อนไขที่สวยงามในReact มันจะช่วยให้คุณสามารถเขียนโค้ดการเรนเดอร์แบบมีเงื่อนไขที่อ่านได้ใน React อย่างรวดเร็ว ไม่ว่าคุณจะต้องการทดสอบเงื่อนไขเดียวหรือหลายเงื่อนไข คุณสามารถทำได้ด้วย< RenderWhen />

คอมโพเนนต์ ทำงานคล้ายกับคำสั่ง if/else และ switch/case ช่วยให้คุณตรวจสอบชุดเงื่อนไขสำหรับการแสดงผลตามเงื่อนไขใน React

ในตัวอย่างข้างต้น โค้ดจะแสดงข้อความตามวันในสัปดาห์ เงื่อนไขสุดท้ายเป็นจริงเสมอ แต่จะแสดงผลเมื่อเงื่อนไขทั้งหมดข้างต้นล้มเหลวเท่านั้น มันทำงานเหมือนกับคำสั่งเริ่มต้นของ switch / case

คอมโพเนนต์ ยอมรับข้อ เสนอ isTrueซึ่งอนุญาตให้คุณใช้เงื่อนไขที่ซ้อนกัน หมายความว่าเงื่อนไขย่อยทั้งหมดจะถูกตรวจสอบก็ต่อเมื่อเงื่อนไขที่ผ่านใน ประเมินเป็นจริงเท่านั้น

ลองดูส่วนประกอบ React เล็กๆ นี้บนGitHub

สร้างเว็บแอปพลิเคชันที่เขียนได้

อย่าสร้างเว็บขนาดใหญ่ ใช้Bitเพื่อสร้างและเขียนส่วนประกอบซอฟต์แวร์แบบแยกส่วน — ในเฟรมเวิร์กที่คุณชื่นชอบ เช่น React หรือ Node สร้างแอปพลิเคชันที่ปรับขนาดได้และเป็นโมดูลด้วยประสบการณ์การพัฒนาที่ทรงพลังและสนุกสนาน

นำทีมของคุณมาที่Bit Cloudเพื่อโฮสต์และทำงานร่วมกันในส่วนประกอบต่างๆ ร่วมกัน เร่งความเร็ว ปรับขนาด และสร้างมาตรฐานการพัฒนาเป็นทีม ลองใช้ฟรอน ท์เอนด์ ที่เขียนได้โดยใช้Design SystemหรือMicro Frontendsหรือสำรวจแบ็กเอนด์ ที่ เขียนได้โดยใช้คอมโพเนนต์ ฝั่งเซิร์ฟเวอร์

ลองดูสิ →

เรียนรู้เพิ่มเติม