React-Portal 是 React 的一个非常强大的工具，它可以让 React 组件在应用的 DOM 层次结构之外渲染。这使得我们能够在应用的顶层渲染弹出框模块，而不必担心它被其他底层内容遮挡。在本篇文章中，我们将会学习如何使用 React-Portal 制作一个模态框，以及如何定制化 Portal 组件。
什么是 React-Portal
React-Portal 是 React 的一种嵌套渲染的方式，它允许我们在应用的顶层渲染一个组件，并将其插入到 DOM 树中任何位置。这使得我们能够更好地进行页面布局控制，同时解决了一些 React 本身无法解决的问题。React-Portal 允许我们使用组件中的一些内容，例如对话框、tooltips、弹出菜单等，将其渲染到任何页面的特定位置上。具体而言，使用 React-Portal 可以实现以下功能：
- 在不同组件层次结构中呈现内容
- 未渲染未创建的元素正确地呈现内容
- 避免与其他 DOM 元素发生重叠或触发 z-index 问题
因此 React-Portal 技术在我们构建单页应用的时候非常有用，让我们能在页面中随意突破，但它并不是 React 中的默认方法，所以我们需要手动来实现 Portal 组件。
React-Portal 安装
在项目中使用 React-Portal 首先要使用 npm 安装它。打开终端并键入以下命令：
npm install react-portal
在使用 React-Portal 之前，需要导入它：
import { createPortal } from "react-dom";使用 React-Portal 实现模态框
在 React 中显示模态框非常容易，但它并不是一个通用的功能。在这个部分中，我们将演示如何使用 React-Portal 从组件的位置呈现模态框。
-- -------------------- ---- -------
------ - ------------ - ---- ------------
------ ----- ---- -------
----- ----- ------- --------------- -
-------- -
------ -
-------------
---- ------------------
---- --------------------------
---- -------------------------
-----------------------
------
---- -----------------------
----------------------
------
---- -------------------------
------- -------------------------------------------
------
------
-------
-------------
-
--
-
-
------ ------- ------在上面这个组件中，我们使用了 createPortal 方法把模态框呈现到了 app 组件 DOM 树之外，也就代表着我们能够在网页的任何位置渲染出这个模态组件。
完整示例代码
在下面这个示例中，我们创建了 Modal 组件，并添加了一些按钮，这些按钮通过 onClick 属性与 Modal 组件中的方法进行联系：
-- -------------------- ---- -------
------ ---------------
------ ----- ---- -------------
------ - -------- - ---- --------
------ ------- -------- ----- -
----- -------- ---------- - ----------------
------ -
---- ----------------
--------------
------- ----------- -- -------------------------------
------- -- -
------
-------------- -- -----------------
--------------------
---------------------
--
--
------
--
-总结
React-Portal 非常适合用于创建在页面中呈现的内容、tooltips、弹出菜单等特定位置上的内容。它在 React 组件外渲染组件使得我们可以自由修改页面 DOM 树，并在不同嵌套组件结构中呈现特定内容，避免了页面布局上的复杂性。在实际的项目中，使用 React-Portal 有利于提高项目的可维护性和可伸缩性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fa01095b1f8cacd728cda