简介
在 React 开发中，有时候我们需要在组件树之外渲染某些 DOM 元素，或者将组件添加到全局中，这时候就需要用到 portals 技术。@mathieudutour/react-portal 是一个 React 的第三方组件库，可以帮助我们解决这个问题，本文将介绍该 npm 包的使用教程。
安装
我们可以通过 npm 安装 @mathieudutour/react-portal 组件库：
npm install @mathieudutour/react-portal --save
使用
使用该组件库非常简单，只需要在组件内部引用 <portal> 组件并提供渲染到的目标 DOM 元素，即可将组件渲染到目标 DOM 元素之外。
示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------ ---- ------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ---------- ----- --
-
----------- - -- -- -
--------------- ---------- --------------------- ---
--
-------- -
----- ----- - -------------------- - -
--------
---- ------------------
---- -------------------------
--------------
------
---- -----------------------
-------- ------- --------
------
---- -------------------------
------- -------------------------------- --------------
------
------
---------
- - -----
------ -
-----
------------
------- --------------------------------- --------------
-------
------
--
-
-
-------------------- --- ---------------------------------通过上面的代码，我们可以在 <portal> 组件中渲染弹窗组件，该弹窗会被渲染到 body 元素外层，不被依赖于其他组件，可以避免样式和事件的影响。
API
<portal> 组件
属性
| 属性 | 类型 | 描述 |
|---|---|---|
| children | ReactElement | 待渲染的组件 |
| container | HTMLElement | | 设置渲染目标的 DOM 元素，默认为 document.body，也可以自己指定其他的目标元素。 |
总结
通过使用 @mathieudutour/react-portal 组件，我们可以将组件渲染到 body 元素外部，提高代码的可维护性和可复用性，避免样式和事件的影响。总之，该 npm 包非常实用，强烈推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446e9