React 门户(Portal)并不是一种状态,而是一种将子组件渲染到父组件 DOM 层次结构之外的技术。它允许你在 React 应用的任何地方渲染一个组件,即使这个位置并不是它的直接父节点。这种特性在处理模态框、提示框、全局通知等 UI 元素时非常有用,因为这些元素通常需要脱离当前的 DOM 结构来呈现。
React 门户通过使用 ReactDOM.createPortal
方法实现。这个方法接收两个参数:要渲染的子元素和一个容器元素。容器元素通常是 DOM 中的一个已有元素,子元素会被渲染到这个容器中,而不是它的父组件中。
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className="modal-overlay">
<div className="modal-content">
<button onClick={onClose}>Close</button>
{children}
</div>
</div>,
document.body
);
}
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<div>
<button onClick={() => setIsModalOpen(true)}>Open Modal</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
<h1>Modal Content</h1>
</Modal>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
event.stopPropagation()
阻止事件冒泡。通过理解这些基础概念和应用场景,你可以更好地利用 React 门户来构建复杂的用户界面。
领取专属 10元无门槛券
手把手带您无忧上云