react-content-portal 是一个用于创建 HTML 元素（如提示框、弹窗等）的 React 组件，可以轻松地将这些元素添加到现有的 React 应用程序中，并支持多个嵌套层级的元素。在本篇文章中，我们将学习如何使用 react-content-portal 这个 npm 包。
安装
使用 npm 在项目中安装 react-content-portal：
npm install react-content-portal
引入
在你的 React 组件中引入 react-content-portal：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------ ---- -----------------------
-------- ----- -
------ -
-----
---------- -----------
--------
------------------------
---------
------
--
-
-------------------- --- ---------------------------------我们在 App 组件中使用 Portal 组件包裹了一个 <div> 元素，这将会把这个元素从当前父元素（即 App 组件）中升级一级，添加到整个页面的最顶层！
高级使用
现在我们来举个高级用例。假设我们正在构建一个注释系统，用户可以在网站上标注不同的内容进行讨论。我们需要添加能够让用户创建和删除注释的功能。
我们可以使用 react-content-portal 来帮助我们实现这个功能。首先，我们需要创建一个注释组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------------------
-------- -------------- -
----- - -- -- ----- -------- - - ------
----- ----- - -
--------- -----------
---- - - -----
----- - - -----
---------------- --------
-------- ---------
------- ---- ----- -------
--
------ -
--------
---- --------------
------- -----------------------------
-------------
------
---------
--
-
------ ------- --------Comment 组件中，我们使用了 Portal 组件把包裹的 <div> 元素从父组件中脱离，这样就可以实现将评论组件放到整个页面的最高层面，从而实现现实效果。
注意到，我们在 Comment 组件中设置了 z-index。这是因为我们希望注释组件可以覆盖我们的网站内容，这个 z-index 的数值必须大于所有网站内容的层级数。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ------------
-------- ----- -
----- ---------- ------------ - -------------
----- ---------------- - ------- -- -
----- - -- - - - -------------------------------------
----- ---- - -------------------
-- ------ -
------------------------- - -- -- ---- ----
-
--
----- ------------------- - ------- -- -
----- ----------- - --------------
------------------------- ---
-------------------------
--
------ -
---- -------------------------- -------- --------- ---------- ---
---------- -----------
----------------------- ------ -- -
--------
-----------
-------------
-------------
-------------------
------------ -- ---------------------------
--
---
------
--
-现在，我们在 <div> 元素上绑定了一个 onClick 事件监听器，可以让用户点击页面的位置，并弹出一个提示框让用户输入评论内容，如果用户输入了内容，就将其存储在 comments 的状态中。
我们遍历 comments 状态，并在页面的对应位置显示注释。注释的坐标信息来自保存在 comments 状态中的数据，在某个注释组件上点击 X 可以删除对应的注释。从而我们实现了简单的注释系统。
结论
使用 React 和 react-content-portal，我们可以轻松地创建、添加和删除 HTML 元素，从而实现了注释系统这样的高级应用。除此之外，react-content-portal 还支持多个嵌套层级的元素，充分发挥了 React 的组件树和一切皆组件的优势。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672281e8991b448e3978