在前端开发中，我们经常会遇到需要在页面上弹出一个模态框或者弹窗的需求。这时候，我们可以使用一些开源的插件来快速实现，比如 react-portalizer。本文就来讲解一下如何使用这个 npm 包来实现模态框和弹窗的功能。
react-portalizer 是什么？
react-portalizer 是一个用于 React 应用中创建模态框和弹窗的 npm 包，它依赖于 react-dom 中提供的 Portal API。使用它，你可以将模态框和弹窗组件所在的 DOM 节点插入到页面的 <body> 元素下，从而避免了因为 z-index 的问题造成的层级混乱。
安装 react-portalizer
要使用 react-portalizer，首先需要在项目中进行安装：
npm install react-portalizer --save
如何使用 react-portalizer
创建一个简单的模态框
下面我们来创建一个简单的模态框组件，包含以下两个文件：
-- -------------------- ---- -------
-- --------
------ ------ - ------ - ---- --------
------ - ------------ - ---- ------------
------ --------------
----- ----- - -- -------- ----- -------- -- -- -
----- --- - -------------
-- ------- ------ -----
------ -------------
---- -------------------------- ------------------
---- ------------------------- --------- ---------- -- ---------------------
----------
------
-------
----------------------------------
--
--
------ ------- -------- -------------------- ---- ------- -- --------- -- --------------- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------- ------- -- -- ----- -------- ----- ---------------- ------- ------------ ------- - -------------- - ----------- ----- ----------- - --- --- ------- -- -- ----- -------- ----- -
这个 Modal 组件接受三个参数：
- onClose：关闭模态框的回调函数。
- open：是否打开模态框。
- children：模态框内嵌的子组件。
其中，我们使用了 createPortal 函数将模态框的 DOM 节点插入到了一个 id 为 portal 的 div 元素下。
然后在其他组件中就可以使用此 Modal 组件了：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- ----------
----- ----------- - -- -- -
----- ------ -------- - ----------------
------ -
--
------- ----------- -- -------------------- ------------
------ ----------- ----------- -- ----------------
---------- -----------
--------
---
--
--创建弹窗组件
除了模态框，我们还经常会需要在页面中弹出一个通知框或者警告框等弹窗组件。下面我们来创建一个简单的弹窗组件，包含以下两个文件：
-- -------------------- ---- -------
-- --------
------ ------ - ------ - ---- --------
------ - ------------ - ---- ------------
------ --------------
----- ----- - -- ----- --------- ------- - ---- -- -- -
----- ------ -------- - ---------------
----- --- - ---------
------------ -- -
----- ----- - ------------- -- -
---------------
-- ---------
------ -- -- --------------------
-- ----
-- ------- ------ -----
------ -------------
---- ----------------- --------------- ----------
----------
-------
----------------------------------
--
--
------ ------- -------- -------------------- ---- ------- -- --------- -- ------ - --------- ------ ---- ----- ----- ---- ---------- ----------------- -------- ----- -------- ----- - -------------- - ----------- -------- ------ -------- ------------- -------- - ------------- - ----------- -------- ------ -------- ------------- -------- -
这个 Alert 组件接受三个参数：
- type：弹窗类型，可以是 success 或者 danger。
- children：弹窗内嵌的子组件。
- timeout（可选）：自动关闭的时间，单位是毫秒，默认为 3000 毫秒。
然后在其他组件中就可以使用此 Alert 组件了：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
----- ----------- - -- -- -
------ -
--
------- ----------- -- -------------------- --------------------------
------- ----------- -- ------------------- -------------------------
---
--
-------- --------------- -------- -
------ ------ ------------------------------
-
--小结
本文介绍了如何使用 react-portalizer 这个 npm 包来创建模态框和弹窗组件，同时也简单介绍了 react-dom 中的 Portal API。希望能对你学习和使用这个插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ee81e8991b448e0a21