createPortal 是 React 提供的一個實用工具，用于將 React 子元素渲染到 DOM 中的某個位置，而該位置與父組件不在同一個 DOM 層次結構中。這在某些特殊場景下非常有用，比如實現模態框、彈出菜單、固定定位元素等功能。

基本語法

JavaScript

復制

const portal = createPortal(child, container);

• child 是要渲染的 React 子元素。

• container 是 DOM 元素，子元素將被渲染到這個元素中。

使用場景

1. 模態框：將模態框的內容渲染到 body 的頂層，以確保模態框不會被其他元素遮擋。

2. 彈出菜單：將彈出菜單渲染到 body 的頂層，以確保菜單不會被其他元素遮擋。

3. 固定定位元素：將固定定位的元素渲染到 body 的頂層，以確保元素的定位不會受到父元素的影響。

示例

下面是一個使用 createPortal 實現模態框的示例：

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';function Modal() {const [showModal, setShowModal] = useState(false);// 創建一個 DOM 元素作為模態框的容器const modalRef = React.useRef(document.createElement('div'));useEffect(() => {// 將模態框容器添加到 body 中document.body.appendChild(modalRef.current);return () => {// 組件卸載時移除模態框容器document.body.removeChild(modalRef.current);};}, []);return (<><button onClick={() => setShowModal(true)}>Open Modal</button>{showModal && (createPortal(<div className='modal-overlay'><div className='modal'><h2>Modal Title</h2><p>This is a modal content</p><button onClick={() => setShowModal(false)}>Close Modal</button></div></div>,modalRef.current))}</>);
}export default Modal;

CSS

.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}.modal {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);width: 300px;
}

優點

• 靈活性：可以將子元素渲染到 DOM 中的任意位置。

• 避免樣式沖突：通過將元素渲染到不同的 DOM 層次結構中，可以避免樣式沖突。

• 優化性能：通過減少不必要的 DOM 操作，可以優化性能。

注意事項

• 清理資源：在組件卸載時，確保移除創建的 DOM 元素，以避免內存泄漏。

• 樣式隔離：確保渲染到不同 DOM 層次結構中的元素不會受到其他樣式的影響。

總結

createPortal 是 React 提供的一個強大工具，用于將子元素渲染到 DOM 中的任意位置。通過使用 createPortal，可以實現模態框、彈出菜單等功能，并確保這些元素的樣式和行為不受父組件的影響。

以下是一個更完整的示例，展示如何使用 createPortal 實現一個模態框：

import React, { useState } from 'react';
import { createPortal } from 'react-dom';function Modal() {const [showModal, setShowModal] = useState(false);// 創建一個 DOM 元素作為模態框的容器const modalRef = React.useRef(document.createElement('div'));// 將模態框容器添加到 body 中useEffect(() => {document.body.appendChild(modalRef.current);return () => {document.body.removeChild(modalRef.current);};}, []);return (<><button onClick={() => setShowModal(true)}>Open Modal</button>{showModal && (createPortal(<div className='modal-overlay'><div className='modal'><h2>Modal Title</h2><p>This is a modal content</p><button onClick={() => setShowModal(false)}>Close Modal</button></div></div>,modalRef.current))}</>);
}export default Modal;

.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 1000;
}.modal {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);width: 300px;max-height: 80vh;overflow-y: auto;
}

在這個示例中，模態框的內容被渲染到一個獨立的 DOM 容器中，該容器被添加到 body 中。這確保了模態框不會被其他元素遮擋，并且可以獨立于父組件進行樣式控制。