二. 什么是 createPortal API？

通常情況下，React 組件與其子組件存在父子關(guān)系，所有子組件渲染后都嵌套在父組件內(nèi)。然而，通過 createPortal，React 組件可以將部分或全部子組件渲染到 DOM 中非父節(jié)點(diǎn)的位置。

1. createPortal 函數(shù)簽名

ReactDOM.createPortal(children, domNode, [key])

a. 參數(shù)說明

• children：React 組件、JSX、React Fragment、字符串、數(shù)字或這些類型的數(shù)組
• domNode：目標(biāo) DOM 節(jié)點(diǎn)，可通過 document.getElementById 或其他 DOM 查詢方式獲取
• key（可選）：用于標(biāo)識(shí) portal 的唯一字符串或數(shù)字

createPortal 返回一個(gè) React 節(jié)點(diǎn)，可以在組件返回 JSX 或嵌套在其他組件中使用。

三. createPortal 的核心特性

1. 渲染位置的靈活性

Portal 僅改變組件在 DOM 中的渲染位置，其行為與普通組件一致。例如，從 portal 觸發(fā)的事件沿著 React 樹冒泡，而非 DOM 樹。

2. 父子關(guān)系的保留

Portal 雖然渲染在 DOM 的其他位置，但仍然是渲染它的父組件的子組件。父組件 props 或 context 改變時(shí)，portal 會(huì)重新渲染。

四. 使用 createPortal 的優(yōu)勢

1. 靈活的渲染位置

Portal 可以將元素渲染到父組件之外的 DOM 節(jié)點(diǎn)，適用于工具提示、模態(tài)框等 UI 組件。

2. 與非 React 庫的集成

Portal 允許 React 組件在非 React 的第三方庫中渲染，為集成提供便利。參考示例

五. 使用 createPortal 的最佳實(shí)踐

1. 簡化 Portal 組件

盡量保持 portal 內(nèi)部組件簡單，減少維護(hù)成本。示例模態(tài)框：

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} > 關(guān)閉 < /button >
    < /div > ,
    document.getElementById('modal-root')
  );
};

2. 集中狀態(tài)管理

在父組件中管理影響 portal 的狀態(tài)，避免在 portal 內(nèi)部管理狀態(tài)。

3. 樣式傳遞

Portal 不會(huì)繼承父組件的 CSS 樣式，需要顯式傳遞：

const style = { color: 'red' };
ReactDOM.createPortal( < p style={style} > Hello, Portal! < /p > , document.getElementById('modal-root'));

4. 無障礙訪問

確保 portal 內(nèi)容對(duì)屏幕閱讀器友好，使用 ARIA 角色和屬性增強(qiáng)可訪問性。

六. createPortal 的局限性

1. 樣式繼承問題

Portal 不會(huì)繼承父組件 CSS，可能導(dǎo)致樣式問題，特別是在復(fù)雜布局中。

2. 復(fù)雜性增加

多個(gè)相互依賴的 portal 增加維護(hù)和調(diào)試難度，DOM 渲染位置與 React 組件層級(jí)不一致可能造成理解難度。

3. 事件冒泡路徑

Portal 的事件沿 React 樹冒泡，而非 DOM 樹，可能導(dǎo)致調(diào)試?yán)щy。

七. createPortal 的常見用途

1. 模態(tài)框、工具提示和彈窗

const Modal = ({ isOpen, onClose }) = > {
  if (!isOpen) return null;
  return ReactDOM.createPortal(
    < div className="modal" >
      < p > 這是一個(gè)模態(tài)框 < /p >
      < button onClick={onClose} > 關(guān)閉 < /button >
    < /div > ,
    document.getElementById('modal-root')
  );
};

2. 與非 React 應(yīng)用集成

Portal 支持將 React 組件渲染到 DOM 的任意位置，方便在靜態(tài)頁面或非 React 應(yīng)用中使用。

八. 測試 Portals 的技巧

1. 驗(yàn)證渲染位置

expect(document.getElementById('modal-root').textContent).toBe('Hello, Portal!');

2. 測試交互行為

驗(yàn)證按鈕點(diǎn)擊是否觸發(fā)正確邏輯，例如關(guān)閉模態(tài)框。

3. 可訪問性測試

檢查 ARIA 屬性是否正確設(shè)置，確保屏幕閱讀器可訪問 portal 內(nèi)容。

4. 資源清理

父組件卸載時(shí)，確保 portal 內(nèi)容正確卸載，避免內(nèi)存泄漏。

九. 總結(jié)

createPortal 是 React DOM 提供的強(qiáng)大工具，允許開發(fā)者將子組件渲染到 DOM 的其他位置。它在構(gòu)建模態(tài)框、工具提示、彈窗和通知框等 UI 組件時(shí)非常實(shí)用。

使用時(shí)需注意樣式繼承、事件冒泡路徑和復(fù)雜性等問題。通過遵循最佳實(shí)踐和測試方法，可以充分發(fā)揮 createPortal 的優(yōu)勢，提供靈活高效的用戶交互體驗(yàn)。

原文鏈接
Refine 官方博客

#你可能也喜歡這些API文章!

API 監(jiān)控與指標(biāo)儀表盤：保障系統(tǒng)平穩(wěn)運(yùn)行的核心實(shí)踐

十大 API 安全供應(yīng)商

如何使用 amazon scraper api 進(jìn)行商品數(shù)據(jù)采集

用足球數(shù)據(jù)api構(gòu)建足球數(shù)據(jù)分析應(yīng)用的技術(shù)實(shí)踐

OpenAI OSS API 架構(gòu)深度解析：GPT-OSS-120B 與 GPT-OSS-20B 多模型接入全指南

從Flask到FastAPI的平滑遷移

如何獲取Perplexity AI API Key 密鑰（分步指南）

JSON API vs XML API：數(shù)據(jù)格式之爭

如何在Java、Python、PHP中使用人臉實(shí)名認(rèn)證API？