React Portals 是一种将组件渲染到 DOM 树中比自身组件更高层级的位置的技术。这使得您可以将一些 UI 组件渲染到页面上不同的位置，而不会破坏应用程序的布局。
在项目中使用 Next.js 时，您可能想要在其中使用 React Portals。本文将向您介绍如何在 Next.js 中使用 React Portals。
准备工作
首先，您需要安装 Required npm 包：
npm install react react-dom
创建 Portal 组件
现在让我们创建一个简单的 Portal 组件，并将其用于演示。
Portal.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- ------ - -- -------- -- -- -
----- ---------- - ---------------------------------------
----- -- - ------------------------------
------------ -- -
---------------------------
------ -- -- -
---------------------------
--
-- ---- -------------
------ ------------------------------- ----
--
------ ------- -------在这里我们：
- 创建 div 元素作为 Portal 的目标容器（el）
- 使用 useEffect 钩子函数，在组件装载时将该容器添加到 DOM 中，并在组件卸载时移除该容器
- 使用
createPortal将传递给Portal组件的子元素渲染到容器中
使用 Portal 组件
现在让我们在页面上使用此 Portal 组件，并将其用于演示。
pages/index.js
-- -------------------- ---- -------
------ ------ ---- -----------------------
------ ------- -------- ------ -
------ -
--
----------- -- -- -------------
--------
------------- ------------
---------
---
--
-在这里我们：
- 引入刚刚创建的
Portal组件 - 在页面上使用该组件，将
<button>元素作为传入Portal组件的子元素
现在，当您在页面上单击 "Click Me!" 按钮时，<button> 元素将被渲染到容器中。
结论
通过使用 React Portals，您可以将组件渲染到 DOM 树中比自身组件更高层级的位置，而不会破坏布局。
在本文中，我们学习了如何在 Next.js 中使用 React Portals。现在您可以将此技术应用于您的应用程序中，使其更加灵活和模块化。
希望本文对您有所帮助！如果您有任何疑问或建议，请随时在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67358f9c0bc820c5824f2013