React中createPortal 的详细用法
createPortal 是 React 提供的一个实用工具，用于将 React 子元素渲染到 DOM 中的某个位置，而该位置与父组件不在同一个 DOM 层次结构中。这在某些特殊场景下非常有用，比如实现模态框、弹出菜单、固定定位元素等功能。
基本语法
JavaScript
复制
const portal = createPortal(child, container);-
child是要渲染的 React 子元素。 -
container是 DOM 元素，子元素将被渲染到这个元素中。
使用场景
-
模态框：将模态框的内容渲染到 body 的顶层，以确保模态框不会被其他元素遮挡。
-
弹出菜单：将弹出菜单渲染到 body 的顶层，以确保菜单不会被其他元素遮挡。
-
固定定位元素：将固定定位的元素渲染到 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 中。这确保了模态框不会被其他元素遮挡，并且可以独立于父组件进行样式控制。