React Academy · บทเรียน

React Portals คืออะไร

ทำความเข้าใจ API createPortal และประโยชน์ของการเรนเดอร์นอก div ราก

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

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

ยินดีต้อนรับ

ในบทเรียนนี้ คุณจะเรียนรู้ว่า React Portals คืออะไร เหตุใดการเรนเดอร์นอกทรี DOM ของคอมโพเนนต์แม่จึงมีประโยชน์ และวิธีใช้ API createPortal

ลำดับชั้น DOM ปกติของ React

ตามค่าเริ่มต้น คอมโพเนนต์ทุกตัวจะเรนเดอร์อยู่ภายในโหนด DOM ของคอมโพเนนต์แม่ โดยปกติแอป React ทั้งหมดจะอยู่ภายใน `

` เดียว วิธีนี้ใช้ได้ดีจนกว่าคุณจะต้องให้โมดัล คำแนะนำเครื่องมือ หรือเมนูดรอปดาวน์หลุดออกจากคอมโพเนนต์แม่ที่มี `overflow: hidden`

พอร์ทัลคืออะไร

**พอร์ทัล** ช่วยให้คุณเรนเดอร์ผลลัพธ์ของคอมโพเนนต์ลงในโหนด DOM อื่น ซึ่งอยู่ภายนอกรากของ React ทรี React ของคอมโพเนนต์ยังคงเดิม มีเพียงตำแหน่งใน DOM เท่านั้นที่เปลี่ยน

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

เหตุผลที่มีพอร์ทัล

คุณสมบัติ CSS เช่น `overflow: hidden` บริบทการซ้อนของ `z-index` และ `transform` บนคอมโพเนนต์แม่ อาจตัดหรือซ่อนองค์ประกอบลูกได้ พอร์ทัลหลีกหนีข้อจำกัดเหล่านี้ด้วยการแนบผลลัพธ์ที่เรนเดอร์แล้วเข้ากับโหนด DOM อื่น

การส่งต่อเหตุการณ์ยังคงทำงาน

แม้โหนด DOM ของพอร์ทัลจะอยู่นอกคอมโพเนนต์แม่ แต่ **เหตุการณ์ของ React ยังคงส่งต่อขึ้นไป** ผ่านทรีคอมโพเนนต์ของ React ไม่ใช่ทรี DOM การคลิกภายในโมดัลของพอร์ทัลจะส่งต่อขึ้นไปยังคอมโพเนนต์แม่ใน React

การสร้างเป้าหมายของพอร์ทัล

คุณสามารถสร้างพอร์ทัลลงในโหนด DOM ที่มีอยู่แล้วได้ รูปแบบที่ใช้กันทั่วไปคือเพิ่ม `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

วงจรชีวิตของพอร์ทัลผูกกับคอมโพเนนต์แม่ของ React

พอร์ทัลจะถูกเมานต์เมื่อคอมโพเนนต์แม่เมานต์ และถูกยกเลิกการเมานต์เมื่อคอมโพเนนต์แม่ถูกยกเลิกการเมานต์ React ยังคงติดตามพอร์ทัลเป็นส่วนหนึ่งของทรีคอมโพเนนต์เดียวกัน ดังนั้น context และ ref จึงทำงานตามปกติ

Context ทำงานข้ามพอร์ทัล

เนื่องจากพอร์ทัลยังคงเป็นส่วนหนึ่งของทรีคอมโพเนนต์ React ค่า context ที่มีการส่งผ่านจากด้านบนของพอร์ทัลจึงยังเข้าถึงได้ภายในพอร์ทัล ตำแหน่งใน DOM ไม่ส่งผลต่อสายโซ่ context ของ React

การใช้ createPortal ร่วมกับสถานะ

ควบคุมการมองเห็นของพอร์ทัลด้วยตัวแปรสถานะ สลับค่าด้วยปุ่ม แล้วเนื้อหาของพอร์ทัลจะปรากฏใน document.body ขณะที่ปุ่มยังคงอยู่ในตำแหน่งปกติของ DOM

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

การเรนเดอร์ฝั่งเซิร์ฟเวอร์และพอร์ทัล

พอร์ทัลจำเป็นต้องมีโหนด DOM อยู่ก่อน จึงทำงานฝั่งไคลเอ็นต์เสมอ ใน Next.js หรือการตั้งค่า SSR อื่น ๆ ตรวจสอบให้แน่ใจว่าโค้ดเรนเดอร์พอร์ทัลทำงานเฉพาะในเบราว์เซอร์ โดยใช้ `useEffect` หรือการตรวจสอบสถานะว่าเมานต์แล้ว

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

React Portals เรนเดอร์เนื้อหาลงในโหนด DOM อื่น การทำเช่นนี้ส่งผลต่อส่วนใดของทรีคอมโพเนนต์ React

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

สรุปทบทวน

พอร์ทัลช่วยให้คุณเรนเดอร์ผลลัพธ์ของ React ลงในโหนด DOM ใดก็ได้โดยใช้ createPortal() ทรี React, context และการส่งต่อเหตุการณ์ยังคงไม่เปลี่ยนแปลง ใช้พอร์ทัลเพื่อหลีกเลี่ยงข้อจำกัดของ overflow/z-index สำหรับโมดัลและคำแนะนำเครื่องมือ

บทถัดไป

บทเรียนถัดไป: **การสร้างคอมโพเนนต์โมดัลด้วยพอร์ทัล** — คุณจะสร้างโมดัลที่นำกลับมาใช้ใหม่ได้อย่างสมบูรณ์ โดยสร้างพอร์ทัลลงใน document.body พร้อมการจัดการสถานะเปิด/ปิด

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

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

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

คอร์ส: 88
บทเรียน: 324

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

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

บทเรียน “React Portals คืออะไร” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “React Portals คืออะไร”

ทำความเข้าใจ API createPortal และประโยชน์ของการเรนเดอร์นอก div ราก คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “React Portals คืออะไร” ใช้เวลานานแค่ไหน

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

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

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

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

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