【React 學習筆記 EP.27】Portal

什麼是 Portal？

Portal 是 React 將元件渲染到其他 DOM 位置的方法。它能讓元件邏輯仍在原本 React 樹中，但畫面可以顯示到頁面中的另一個地方。

Portal 概念

1. createPortal：用來將內容渲染到指定 DOM 節點的 API。
2. children：要被搬出去顯示的內容。
3. container：實際放置內容的 DOM 節點。

Portal 語法

1. createPortal(children, container)：把內容渲染到指定位置。
2. children：Modal、提示框等畫面。
3. document.body：常見的容器位置。
4. return createPortal(...)：回傳 Portal 畫面。

Portal 常見錯誤

import { createPortal } from "react-dom";

function Modal() {
  return createPortal(
    <div style={{ position: "fixed", inset: 20, background: "white" }}>
      Modal
    </div>,
    document.body
  );
}

export default function App() {
  return (
    <>
      <p>主畫面</p>
      <Modal />
    </>
  );
}