在 React 开发中，我们经常需要实现在一个组件中弹出另一个组件，例如模态框、下拉框等等，而这些组件需要在 DOM 树中放在当前组件以外的位置。这时候我们就需要使用一个叫做 “portal” 的技术了，而 react-portal-hoc 就是一个实现这个技术的 npm 包。
安装
你可以使用 npm 安装 react-portal-hoc：
--- ------- ----------------
也可以使用 yarn：
---- --- ----------------
使用
react-portal-hoc 的具体实现是通过使用 React 的 ReactDOM.createPortal() API 来完成的。这个 API 可以让你将一个 React 组件渲染到当前组件以外的任意元素上。
首先，你需要先在你的组件中引入 react-portal-hoc：
------ ------ ---- -------------------
然后，使用 portal 函数将你的组件转化成一个有“portal”功能的组件，以实现在当前组件以外渲染组件的目的：
----- ----------- - ------- -- -
------ -
-----
------ --------------
----------- -- -
-------
--------- ------------
--------
--
------
--
--
----- ----- - -------------- -- -
------ -
-----
--------- -----------
----------------
------
--
---在上面的例子中，我们定义了一个名为 MyComponent 的组件，在这个组件中使用了 React 的条件渲染技术，根据 open 属性判断是否渲染一个名为 Modal 的“子组件”。
正是因为 Modal 组件需要在当前组件以外渲染，我们就需要使用 react-portal-hoc 的 portal 函数将它转化为一个有“portal”功能的组件。上面的代码中，portal 函数接收一个参数，即你要转化的组件，在这个例子中就是我们定义的 Modal 组件。Modal 组件的作用是渲染一个名为 Modal Portal 的标题以及他的子组件。
渲染获得的组件后，我们就可以在 MyComponent 组件中根据 open 属性动态实现在当前组件以外渲染一个模态对话框的效果。
指导意义
react-portal-hoc 的原理非常简单，而这也是它非常有用的原因之一。使用 react-portal-hoc，你可以在一个组件中轻松地实现在当前组件以外的任意位置渲染组件。这不仅可以为我们的组件开发带来更多的灵活性，还可以提高我们的组件的可重用性。
在使用 react-portal-hoc 的过程中，我们需要注意一个问题：渲染后的组件位于当前组件以外，这意味着我们无法从父组件通过 props 直接访问它。如果你需要在父组件中控制这个子组件的状态，你可以使用回调函数或 Redux 等技术来实现。
最后，我们在这里提供一份完整的示例代码，供大家参考：
------ ----- ---- --------
------ ------ ---- -------------------
----- --- - -- -- -
----- ------ -------- - ----------------------
----- ----------- - -- -- -
---------------
--
------ -
-----
------ ------- --------
------- -------------------------- --------------
------ ----------- ----------------------
--------- ------------
--------
------
--
--
----- ----- - -------------- -- -
----- ----------- - ------- -- -
-----------------------
------------- -- ----------------
--
------ -
---- ------------------
---- -----------------------
------- ----------------------- ----------------------
-----
---------
----------------
------
------
--
---
------ ------- ----来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fe981e8991b448dd95a