รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข
เรนเดอร์อาร์เรย์ด้วย map() เลือกคีย์ที่คงที่ จัดการสถานะว่างหรือกำลังโหลด และใช้รูปแบบเงื่อนไขที่พบบ่อย
รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
ภาพรวม
เป้าหมาย: เรนเดอร์อาร์เรย์อย่างปลอดภัยและชัดเจนด้วยคีย์ และใช้รูปแบบตามเงื่อนไขอย่างง่ายสำหรับส่วนติดต่อผู้ใช้สถานะว่างหรือกำลังโหลด
map() เพื่อเรนเดอร์อาร์เรย์
ใช้ array.map() เพื่อเปลี่ยนข้อมูลให้เป็นองค์ประกอบ แต่ละองค์ประกอบลูกโดยตรงในรายการต้องมีพร็อพส์คีย์เพื่อให้การปรับให้สอดคล้องมีความเสถียร
ตัวอย่าง: รายการและคีย์
ควรใช้รหัสที่คงที่จากข้อมูลของคุณเป็นคีย์ หลีกเลี่ยงการใช้ดัชนีของอาร์เรย์ เว้นแต่รายการนั้นจะไม่เปลี่ยนแปลง
<div id="root"></div>
พื้นฐานการเรนเดอร์ตามเงื่อนไข
เงื่อนไข:
- สถานะว่าง: แสดงข้อความที่เป็นมิตรเมื่อรายการว่าง
- กำลังโหลด: แสดงตัวหมุนหรือโครงร่าง
- ตัวเลือกการเรนเดอร์: cond ? A : B หรือ cond && A
ตัวอย่าง: ส่วนติดต่อผู้ใช้ขณะโหลดหรือว่าง
จัดการกรณีกำลังโหลดและว่างอย่างชัดเจนเพื่อหลีกเลี่ยงหน้าจอเปล่า
<div id="root"></div>
เคล็ดลับเรื่องคีย์และเงื่อนไข
เคล็ดลับ:
- ใช้รหัสที่คงที่เป็นคีย์ หลีกเลี่ยงดัชนีสำหรับรายการที่เปลี่ยนแปลงได้
- วางคีย์ไว้บนองค์ประกอบที่ครอบอยู่นอกสุดของรายการที่แมป
- ทำให้เงื่อนไขมีขนาดเล็กและอ่านง่าย
แนวทางปฏิบัติที่ดีสำหรับคีย์
สรุป
สรุป: แมปอาร์เรย์เป็นองค์ประกอบด้วยคีย์ที่คงที่ และจัดการสถานะกำลังโหลดหรือว่างด้วยรูปแบบตามเงื่อนไขอย่างง่าย
คำถามที่พบบ่อย
บทเรียน “รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข”
เรนเดอร์อาร์เรย์ด้วย map() เลือกคีย์ที่คงที่ จัดการสถานะว่างหรือกำลังโหลด และใช้รูปแบบเงื่อนไขที่พบบ่อย คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์
- รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข
- ตัวเลือกการตกแต่ง: CSS Modules สไตล์แบบอินไลน์ และตัวช่วยคลาส