随着前端技术的不断发展，React 在前端领域越来越受到开发者的追捧。而 React Hook 则是 React 16.8 版本新增的一项特性，它能够让开发者在函数组件中使用 state 和其他 React 特性。本文将介绍如何使用 React Hook 实现 Modal 弹窗，让用户在点击按钮时弹出一个可关闭的弹窗。
前置条件
在开始本文的实践部分之前，您需要了解以下知识：
- React 基础概念和语法
- React Hook 的基本使用方法
实践步骤
下面将会分步骤实现一个 Modal 弹窗。这个弹窗包含一个打开按钮和一个关闭按钮。
#1 创建 Modal 组件
首先，我们需要创建一个 Modal 组件用于展示弹窗的内容。在这个组件中，我们需要添加两个按钮用于打开和关闭弹窗。在这两个按钮的点击事件中，我们需要使用 React Hook 中的 useState 方法来更新弹窗的状态。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------- -
----- ----------- ------------- - ----------------
----- --------------- - -- -- -
-------------------
--
----- ---------------- - -- -- -
--------------------
--
------ -
-----
------- ---------------------------------------
---------- -- -
-----
---------------
------- ----------------------------------------
------
--
------
--
-
------ ------- ------#2 将 Modal 组件包含在页面中
接下来，我们需要将 Modal 组件包含在页面中并展示。在这个例子中，我们将 Modal 组件包含在 App 组件中并展示。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
-------- ----- -
------ -
-----
------ --
------
--
-
------ ------- ----现在，我们点击打开按钮就能够展示弹窗了。然而，当我们点击弹窗外的区域时并不能关闭弹窗。接下来我们通过 React Hook 的 useEffect 方法来解决这个问题。
#3 使用 useEffect 方法来关闭弹窗
在上一步中我们已经能够打开弹窗了，但当用户点击弹窗外的区域时并不能关闭弹窗。为了实现点击弹窗外的区域时能够关闭弹窗，我们需要使用 React Hook 的 useEffect 方法。我们可以监听 document 的 click 事件，当点击弹窗外的区域时，关闭弹窗。
-- -------------------- ---- -------
------ ------ - --------- ---------- ------ - ---- --------
-------- ------- -
----- ----------- ------------- - ----------------
----- -------- - ---------
------------ -- -
-------- ------------------------- -
-- ----------------- -- ----------------------------------------- -
--------------------
-
-
---------------------------------- --------------------
------ -- -- -
------------------------------------- --------------------
--
-- ------------
----- --------------- - -- -- -
-------------------
--
----- ---------------- - -- -- -
--------------------
--
------ -
-----
------- ---------------------------------------
---------- -- -
---- ---------------
---------------
------- ----------------------------------------
------
--
------
--
-
------ ------- ------现在，我们就能够在点击弹窗外的区域时，关闭弹窗了。
总结
在本文中，我们使用 React Hook 实现了一个具有关闭功能的 Modal 弹窗。使用 React Hook 可以让我们更加简单地使用 state 和其他 React 特性，并且也不需要知道类组件和生命周期方法。希望这篇文章对您的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c644c968c7c53b0ec02b8