React Portals:擴展您的工具箱，超越支柱鑽井
要點
React Portal 提供了顯示超出其父級層次結構的組件內容的能力，這對於彈出窗口和覆蓋層等用戶界面組件特別有利。
門戶通過適應多種用例（包括模式窗口、第三方集成、上下文菜單和工具提示）提供了一種呈現用戶界面的通用方法。這些組件旨在無縫適應文檔對像模型 (DOM) 中的各個點，確保其放置的靈活性。
React Portals 提供了一個方便的解決方案，將用戶界面(UI) 考慮因素與主要組件層次結構分離，從而促進改進代碼維護並促進組件z 軸定位的有效管理，使開發人員能夠輕鬆有效地組織和堆疊UI 元素。
現代 Web 應用程序需要用戶界面組件，例如模式和工具提示，儘管它們可能無法與網站設計中預先存在的結構組件無縫對齊。
React 通過利用其創新的Portal 功能，為在多個窗口或不同域中渲染組件的問題提供了一個優雅的解決方案，該功能允許與外部內容無縫集成，同時保持對應用程序的用戶界面和行為的完全控制。
什麼是 React 門戶?
React Portal 提供了一種方法，可以在其父組件樹的範圍之外顯示組件的內容。換句話說，它們有助於在不屬於當前組件的備用 DOM 節點中渲染組件的輸出。
事實證明，當處理必須在文檔對像模型 (DOM) 內更高位置呈現的用戶界面元素（例如彈出窗口或分層內容）時，此功能特別有利。
React 門戶的用途
React Portal 用途廣泛，可以在各種不同情況下有效利用，為開發人員構建 Web 應用程序時提供靈活性和便利性。
考慮到模態和疊加在用戶界面設計中的重要性，建議將它們直接放置在文檔對像模型 (DOM) 的主要層次結構中，以獲得最佳的視覺呈現。通過這樣做，父元素對這些元素施加的任何約束都將被最小化，從而允許不受限制地呈現模式對話和覆蓋。
考慮到外部庫的集成，重要的是要注意此類庫期望在文檔對像模型 (DOM) 中佔據預定位置的實例。
創建響應用戶交互並且必須與視口或特定 DOM 元素相關的上下文菜單是一個有趣的挑戰。
工具提示和彈出窗口是一種常見功能，用於在將鼠標懸停在元素上或單擊元素時提供有關該元素的附加信息。然而，有時這些工具提示和彈出窗口需要呈現在其他元素之上，即使這些元素位於組件層次結構中更靠下的位置。這可能會給需要確保工具提示或彈出框在被其他組件遮擋的情況下保持可見的開發人員帶來挑戰。為了解決這個問題，React Native 支持使用本機視圖將工具提示和彈出窗口直接渲染到屏幕表面，而不是僅僅依賴於框架內創建的虛擬視圖。通過這樣做，開發人員可以創建始終保持可見的工具提示和彈出窗口，無論周圍組件的狀態如何。
React 門戶如何工作
React 組件通常通過將其輸出附加到父組件的 DOM 節點來呈現，這適用於許多情況。但是，當嘗試顯示超出父級層次結構邊界的內容時，這種方法可能會受到限制。
構建模態對話框時，通常會將其內容默認嵌入到父組件的 DOM 元素中。
模態的使用可能會導致不良後果，例如由於從周圍元素繼承而導致樣式衝突和內容限制。
React Portals 通過啟用組件渲染委託的指定 DOM 節點的規範來減輕這種限制。
通過利用 Shadow DOM，可以封裝超出父級 dom 樹邊界的任何用戶界面組件，從而將其從父級樣式和結構所施加的限制中解放出來。
如何使用 React 門戶
React Portals 充當了可以有效使用模態的場景的說明性實例。提供的代碼演示了所涉及的過程。
設置一個基本的 React 應用程序
為了建立一個門戶，必須正確配置一個基本的 React 應用程序作為基礎。人們可以利用 Create React App 等資源以最小的努力快速構建一個項目。
為模態框創建門戶
為了使用 React 構建 Web 門戶，請使用接受兩個參數的 ReactDOM.createPortal() 方法；即，要在門戶中顯示的所需內容以及應在其中呈現內容的文檔對像模型 (DOM) 的特定部分的參考點。
Modal 組件利用門戶在具有標識符“root”的 HTML 元素中顯示其後代。
// Modal.js
import ReactDOM from "react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
export default Modal;
本質上，人們可以在單個組件內描述指定模態中包含的細節。事實上，考慮隨後的實例，其中 ModalContent 元素既包含書信又包含 Concordat 閉包機制:
// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
<div className="modal">
<div className="modal-content">
<p>This is a modal content.</p>
<button onClick={onClose}>Close</button>
</div>
</div>
);
export default ModalContent;
單擊 App.js 文件中的指定按鈕後，您可以訪問模態組件以進行進一步的交互和功能。
// Usage in App component
import { useState } from "react";
import Modal from "./Modal";
import ModalContent from "./ModalContent";
import "./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const toggleModal = () => {
setIsModalOpen(!isModalOpen);
};
return (
<div>
<button onClick={toggleModal}>Open Modal</button>
{isModalOpen && (
<Modal>
<ModalContent onClose={toggleModal}/>
</Modal>
)}
</div>
);
};
export default App;
Modal 組件與主要組件結構隔離，並利用輔助網關在界面中顯示其內容。
您的瀏覽器不支持視頻標籤。
現實世界的例子
React Portal 具有跨各種日常場景的多功能性和適用性，使其成為現代生活中不可或缺的工具。
在開發通知系統時，通常希望消息能夠顯著地顯示在用戶界面的頂部，而不管屏幕上其他組件的位置或位置。這可以通過採用各種設計和開發技術來實現，例如使用固定標題或將通知放置在始終可見的專用區域中。此外，利用響應式佈局和媒體查詢可以確保通知在不同設備和屏幕尺寸上正確顯示，從而增強應用程序的整體可用性和可訪問性。
上下文菜單應位於用戶選擇它的位置附近，無論其在文檔對像模型 (DOM) 的層次結構中的位置如何。
第三方集成經常需要訪問文檔對像模型 (DOM) 的特定部分，而庫本身無法直接訪問這些部分。
門戶使用的最佳實踐
為了最大限度地發揮 React Portal 的效用，請考慮遵循以下建議:
門戶技術的最佳利用取決於對其適用性的了解。雖然這些網關表現出高度的適應性，但它們可能並非在所有情況下都普遍需要。僅當傳統渲染帶來難以克服的挑戰或乾擾其他元素時才使用門戶是謹慎的做法。
為了保持門戶內容的完整性，此類內容必須以獨立的方式呈現，並且不依賴於外部因素（例如父樣式或周圍上下文）。
在管理門戶環境中的事件和操作時，考慮分離內容的獨特特徵非常重要。這涉及有效處理事件的傳播並確保對相關操作進行適當的管理。
React 門戶的好處
React Portal 提供了許多可以改進複雜用戶界面創建的優勢，包括:
通過將用戶界面 (UI) 關注點與主要組件層次結構分離，此方法增強了代碼的維護性和易讀性。
為需要超出其父元素邊界的元素提供一定程度的適應性。
該提案建議實現一個可以輕鬆生成模態窗口和覆蓋元素的系統，這些系統可以與主要用戶界面設計分離。
借助我們強大的工具，您可以輕鬆管理組件的深度排序，從而實現用戶界面元素的整潔有序排列。
潛在的陷阱和注意事項
雖然利用 React Portal 可能具有優勢，但考慮以下幾個因素也很重要:
由於其獨特的性質，門戶網站會在 CSS 中產生不可預見的風格後果。這是因為它們將內容放置在父元素的邊界之外。為了緩解這個問題，在管理門戶上下文中 CSS 元素的範圍時，謹慎使用全局樣式或謹慎行事可能是明智的做法。
為了確保所有用戶都可以訪問您的門戶，保持基本的輔助功能非常重要，例如在通過所述門戶呈現內容時對鍵盤導航的支持以及與屏幕閱讀器的兼容性。
服務器端渲染 (SSR) 在集成門戶時可能會帶來挑戰，因為它依賴於客戶端技術，例如 JavaScript 或 Web 套接字，而這些技術在初始服務器響應期間不可用。因此，門戶功能的全部潛力在 SSR 環境中可能會受到限制。但是，可以通過實施解決方法或替代方法來緩解這些問題，這些方法利用服務器渲染的內容，同時仍然提供豐富的用戶體驗。必須仔細考慮 SSR 功能和門戶功能之間的權衡，以便就其集成做出明智的決策。
推動 UI 超越規範
React Portal 提供了一種優雅而有效的方法來解決複雜的用戶界面場景，其中內容需要擴展到其父組件維度的邊界之外。
通過利用門戶技術並遵循已建立的方法，可以構建具有更高靈活性和更容易維護的用戶界面，從而消除潛在的複雜性。
React Portals 提供了一個強大的解決方案，通過利用模式創建和與外部庫的集成來滿足複雜的用戶界面需求。