随着 Web 应用的发展，Modal 组件已经成为了前端项目中不可或缺的一部分，它可以让用户在操作过程中保持当前的上下文，并在弹出窗口中完成一些操作。而 React Portals 可以帮助我们更加轻松地实现 Modal 组件。本篇文章将详细介绍如何使用 React Portals 实现 Modal 组件。
React Portals 简介
React Portals 可以让我们将 DOM 节点渲染到任意的父节点中，而不是一定要在组件的祖先 DOM 节点中进行渲染。这对于实现 Modal 组件来说非常有用，因为它可以让我们将 Modal 的 DOM 节点渲染到顶层的 DOM 节点中，而不是在组件树中的某个节点中。
在本篇文章中，我们将使用 React Portals 来实现一个简单的 Modal 组件。首先，我们需要引入 React 和 react-dom：
import React from 'react'; import ReactDOM from 'react-dom';
然后，我们需要创建一个新的 DOM 节点，用于渲染 Modal：
const modalRoot = document.getElementById('modal-root');接下来，我们定义一个 Modal 组件，并使用 React Portals 将其渲染到 modalRoot 中：
-- -------------------- ---- -------
----- ----- ------- --------------- -
------------------ -
-------------
------- - ------------------------------
-
------------------- -
-------------------------------
-
---------------------- -
-------------------------------
-
-------- -
------ ----------------------
--------------------
-------
--
-
-在上面的代码中，我们在 Modal 组件的 constructor 中创建了一个新的 div 节点。在 componentDidMount 中，我们将该节点插入到 modalRoot 中。在 componentWillUnmount 中，我们从 modalRoot 中移除该节点。最后，我们使用 React Portals 的 createPortal 方法将 Modal 组件的子元素渲染到该节点中。
下面是一个使用 Modal 组件的例子：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ---------- ----- --
---------------- - ----------------------------
-
------------- -
--------------- ---------- --------------------- ---
-
-------- -
------ -
-----
------- ------------------------------- --------------
--------------------- --
-------
-----
---------- -----------
------- ------------------------------- --------------
------
--------
-
------
--
-
-
-------------------- --- ---------------------------------在上述代码中，我们首先定义了一个 App 组件。它有一个 state 变量 showModal，表示是否显示 Modal。在 toggleModal 中，我们更新 showModal 的值。在 App 组件的 render 方法中，我们渲染一个按钮，在该按钮的点击事件中调用 toggleModal 方法。如果 showModal 为 true，则渲染一个 Modal 组件，并将一个简单的 div 元素作为其子元素。在该 div 元素中，我们可以添加任何我们需要的内容，例如这里的标题和一个关闭按钮。在关闭按钮的点击事件中，我们再次调用 toggleModal 方法，以隐藏 Modal。
总结
本文介绍了如何使用 React Portals 实现 Modal 组件。首先，我们简单介绍了 React Portals 的作用和原理。然后，我们详细讲解了如何通过创建一个新的 DOM 节点，使用 React Portals 将 Modal 组件渲染到该节点中。最后，我们给出了一个使用 Modal 组件的示例代码。希望读者们可以从本文中收获一些有用的内容，能够更好地实现自己的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a29b87d4982a6ebc83a95