API 監控與指標儀表盤：保障系統平穩運行的核心實踐
你可能也喜歡這些API文章!
createPortal API？通常情況下，React 組件與其子組件存在父子關系，所有子組件渲染后都嵌套在父組件內。然而，通過 createPortal，React 組件可以將部分或全部子組件渲染到 DOM 中非父節點的位置。
createPortal 函數簽名ReactDOM.createPortal(children, domNode, [key])children：React 組件、JSX、React Fragment、字符串、數字或這些類型的數組domNode：目標 DOM 節點，可通過 document.getElementById 或其他 DOM 查詢方式獲取key（可選）：用于標識 portal 的唯一字符串或數字createPortal 返回一個 React 節點，可以在組件返回 JSX 或嵌套在其他組件中使用。
createPortal 的核心特性Portal 僅改變組件在 DOM 中的渲染位置，其行為與普通組件一致。例如，從 portal 觸發的事件沿著 React 樹冒泡，而非 DOM 樹。
Portal 雖然渲染在 DOM 的其他位置，但仍然是渲染它的父組件的子組件。父組件 props 或 context 改變時，portal 會重新渲染。
createPortal 的優勢Portal 可以將元素渲染到父組件之外的 DOM 節點，適用于工具提示、模態框等 UI 組件。
Portal 允許 React 組件在非 React 的第三方庫中渲染，為集成提供便利。參考示例
createPortal 的最佳實踐盡量保持 portal 內部組件簡單，減少維護成本。示例模態框：
import ReactDOM from 'react-dom';
import React from 'react';
const Modal = ({ isOpen, children, onClose }) = > {
if (!isOpen) return null;
return ReactDOM.createPortal(
< div className="modal" >
{children}
< button onClick={onClose} > 關閉 < /button >
< /div > ,
document.getElementById('modal-root')
);
};在父組件中管理影響 portal 的狀態，避免在 portal 內部管理狀態。
Portal 不會繼承父組件的 CSS 樣式，需要顯式傳遞：
const style = { color: 'red' };
ReactDOM.createPortal( < p style={style} > Hello, Portal! < /p > , document.getElementById('modal-root'));確保 portal 內容對屏幕閱讀器友好，使用 ARIA 角色和屬性增強可訪問性。
createPortal 的局限性Portal 不會繼承父組件 CSS，可能導致樣式問題，特別是在復雜布局中。
多個相互依賴的 portal 增加維護和調試難度，DOM 渲染位置與 React 組件層級不一致可能造成理解難度。
Portal 的事件沿 React 樹冒泡，而非 DOM 樹，可能導致調試困難。
createPortal 的常見用途const Modal = ({ isOpen, onClose }) = > {
if (!isOpen) return null;
return ReactDOM.createPortal(
< div className="modal" >
< p > 這是一個模態框 < /p >
< button onClick={onClose} > 關閉 < /button >
< /div > ,
document.getElementById('modal-root')
);
};Portal 支持將 React 組件渲染到 DOM 的任意位置，方便在靜態頁面或非 React 應用中使用。
expect(document.getElementById('modal-root').textContent).toBe('Hello, Portal!');驗證按鈕點擊是否觸發正確邏輯，例如關閉模態框。
檢查 ARIA 屬性是否正確設置，確保屏幕閱讀器可訪問 portal 內容。
父組件卸載時，確保 portal 內容正確卸載，避免內存泄漏。
createPortal 是 React DOM 提供的強大工具，允許開發者將子組件渲染到 DOM 的其他位置。它在構建模態框、工具提示、彈窗和通知框等 UI 組件時非常實用。
使用時需注意樣式繼承、事件冒泡路徑和復雜性等問題。通過遵循最佳實踐和測試方法，可以充分發揮 createPortal 的優勢，提供靈活高效的用戶交互體驗。
原文鏈接
Refine 官方博客
