概述
在前端开发中，通常会遇到需要在页面内插入某些内容的情况，例如：弹出层、侧边栏等等。这时候我们就需要用到 React Portal，它可以让我们把组件渲染到任意 DOM 节点上。而 @github1/react-portal-hoc 就是一款非常方便的 npm 包，只需要简单的几步就可以轻松地实现 Portal。
安装
安装很简单，只需要在终端中运行以下命令：
npm install @github1/react-portal-hoc
使用
第一步：创建 Portal 组件
-- -------------------- ---- -------
------ -------- ---- ------------
------ --------- ---- -------------
------ ------ - --------- - ---- --------
------ --------- ---- ----------------------------
----- ------ ------- --------- -
------ --------- - -
--------- --------------------------
--------- ----------------------------
--
-- ---------- --- ---
-------- -
----- - --------- -------- - - -----------
------ ------------------------------- ----------------------------------
-
-
------ ------- ------------------在代码中，我们创建了一个名为 Portal 的组件，并用 ReactDOM.createPortal 把子元素渲染到传入的 selector 节点上。这里我们用了 document.querySelector 来获取需要的节点。
第二步：使用 Portal 组件
在使用 Portal 组件之前，我们需要先准备好需要渲染的节点，这里我们以弹出层为样例。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- -----------
------ ----- ---- ----------
-------- ----- -
----- ----------- ------------- - ----------------
-------- ------------- -
-------------------------
-
------ -
-----
------- ------------------------------------
---------- - -
------- ------------------
------ --------------------- --
---------
- - -----
---- ---------- --
------
--
-
------ ------- ----在代码中，我们创建了一个名为 App 的组件，并在其中定义一个状态值 showModal 和一个方法 toggleModal 用来控制弹出层的显示和隐藏。
我们通过点击按钮触发 toggleModal 方法，当 showModal 为 true 时就渲染 Modal 组件，并通过 Portal 把 Modal 组件插入到 id 为 #modal 的节点上。
第三步：创建 Modal 组件
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------- ------- -- -
-------- ------------- -
----------
-
------ -
---- ------------------
---- --------------------------
--------- ----------
----------------
------- ---------------------------------
------
------
--
-在代码中，我们创建了一个名为 Modal 的组件，用来展示弹出层的内容。
示例代码
-- -------------------- ---- -------
------ -------- ---- ------------
------ --------- ---- -------------
------ ------ - --------- - ---- --------
------ --------- ---- ----------------------------
----- ------ ------- --------- -
------ --------- - -
--------- --------------------------
--------- ----------------------------
--
-------- -
----- - --------- -------- - - -----------
------ ------------------------------- ----------------------------------
-
-
------ ------- -------------------- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- -----------
------ ----- ---- ----------
-------- ----- -
----- ----------- ------------- - ----------------
-------- ------------- -
-------------------------
-
------ -
-----
------- ------------------------------------
---------- - -
------- ------------------
------ --------------------- --
---------
- - -----
---- ---------- --
------
--
-
------ ------- ------ -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------- ------- -- -
-------- ------------- -
----------
-
------ -
---- ------------------
---- --------------------------
--------- ----------
----------------
------- ---------------------------------
------
------
--
-总结
通过使用 @github1/react-portal-hoc，我们可以非常方便地实现 Portal，从而把组件渲染到任意 DOM 节点上。在实际的开发中，Portal 可能是一个不可或缺的工具，希望这篇文章对您的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d7f81e8991b448db3b1