Frontend Academy · บทเรียน

รายการ คีย์ และการเรนเดอร์ตามเงื่อนไข

เรนเดอร์อาร์เรย์ขององค์ประกอบด้วย .map() กำหนด props key ที่คงที่ และเรนเดอร์องค์ประกอบตามเงื่อนไขด้วย && และตัวดำเนินการสามส่วน

บทเรียน 4 จาก 413 ขั้นตอน

รายการ คีย์ และการเรนเดอร์ตามเงื่อนไข เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

การแสดงผลรายการด้วย .map()

แสดงผลรายการแบบเปลี่ยนแปลงได้โดยเรียก .map() กับอาร์เรย์ แล้วคืนค่า JSX สำหรับแต่ละรายการ React จะแสดงผลอาร์เรย์ขององค์ประกอบได้เช่นเดียวกับองค์ประกอบเดี่ยว

const fruits = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {fruits.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

พร็อพ key — เหตุใดจึงสำคัญ

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

คีย์ที่ดีเทียบกับคีย์ที่ไม่ดี

คีย์ที่ดี: รหัสเฉพาะที่คงที่จากข้อมูลของคุณ เช่น item.id คีย์ที่ไม่ดี: ดัชนีของอาร์เรย์ เพราะรายการอาจสลับลำดับ หรือค่าที่สุ่มขึ้นมา เพราะจะเปลี่ยนทุกครั้งที่แสดงผล

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

การแสดงผลอ็อบเจ็กต์

แมปอาร์เรย์ของอ็อบเจ็กต์ไปเป็นคอมโพเนนต์ โดยแยกโครงสร้างอ็อบเจ็กต์ออกเป็นพร็อพส์

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

การแสดงผลตามเงื่อนไขด้วย &&

ใช้ตัวดำเนินการลัดวงจร && เพื่อรวม JSX ตามเงื่อนไข หากด้านซ้ายเป็นค่าเท็จ จะไม่มีการแสดงผลใด ๆ โปรดระวังตัวเลขที่เป็นค่าเท็จ เพราะ 0 จะแสดงผลเป็น '0'

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

การแสดงผลตามเงื่อนไขด้วยนิพจน์สามส่วน

ใช้ตัวดำเนินการสามส่วนเพื่อแสดงผลหนึ่งในสององค์ประกอบตามเงื่อนไข

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

การแสดงผลตามเงื่อนไขด้วยคำสั่ง if

สำหรับเงื่อนไขที่ซับซ้อน ให้ใช้คำสั่ง if ก่อนคำสั่ง return และคืนค่าก่อนเมื่ออยู่ในสถานะกำลังโหลดหรือเกิดข้อผิดพลาด

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

กรองก่อนแมป

กรองอาร์เรย์ก่อนแมป เพื่อแสดงผลเฉพาะรายการที่ตรงกัน วิธีนี้สะอาดและอ่านเข้าใจง่าย

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

สถานะว่าง

จัดการกรณีอาร์เรย์ว่างเสมอ การแสดงรายการว่างโดยไม่บอกอะไรทำให้สับสน ควรแสดงข้อความสถานะว่างที่ช่วยแนะนำผู้ใช้แทน

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

การแสดงผลพอร์ทัลสำหรับรายการ

รายการขนาดยาวที่ต้องปรากฏในโหนด DOM อื่น เช่น เมนูแบบเลื่อนลง สามารถใช้ ReactDOM.createPortal ได้ แต่การแสดงผลรายการส่วนใหญ่ทำได้โดยตรงภายในโครงสร้างต้นไม้เดิม

รายการเสมือนเพื่อประสิทธิภาพ

สำหรับรายการที่ยาวมาก (ตั้งแต่ 1,000 รายการขึ้นไป) ให้ใช้ไลบรารีสำหรับการทำรายการเสมือน เช่น react-window หรือ @tanstack/react-virtual ไลบรารีเหล่านี้จะแสดงผลเฉพาะแถวที่มองเห็น จึงหลีกเลี่ยงปัญหาด้านประสิทธิภาพของ DOM

ตรวจสอบอย่างรวดเร็ว

ในกรณีใดบ้างที่ยอมรับให้ใช้ดัชนีของอาร์เรย์เป็น key ในรายการของ React

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: รายการและการแสดงผลแบบมีเงื่อนไข

แสดงผลรายการด้วย .map() เพิ่มพร็อพ key ที่คงที่และไม่ซ้ำกันเสมอ ใช้ && สำหรับองค์ประกอบที่อาจมีหรือไม่มีก็ได้ (ระวังค่า 0) ใช้เครื่องหมายสามส่วนสำหรับกรณีใดกรณีหนึ่ง ใช้การคืนค่าก่อนกำหนดสำหรับสถานะกำลังโหลดหรือข้อผิดพลาด กรองรายการก่อนใช้การแมปสำหรับรายการแบบมีเงื่อนไข แสดงข้อความสถานะว่างเมื่ออาร์เรย์ไม่มีข้อมูล และใช้รายการเสมือนสำหรับรายการที่ยาวมาก

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “รายการ คีย์ และการเรนเดอร์ตามเงื่อนไข” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รายการ คีย์ และการเรนเดอร์ตามเงื่อนไข” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รายการ คีย์ และการเรนเดอร์ตามเงื่อนไข”

เรนเดอร์อาร์เรย์ขององค์ประกอบด้วย .map() กำหนด props key ที่คงที่ และเรนเดอร์องค์ประกอบตามเงื่อนไขด้วย && และตัวดำเนินการสามส่วน คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “รายการ คีย์ และการเรนเดอร์ตามเงื่อนไข” ใช้เวลานานแค่ไหน

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

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy