🔧 使用 React Hooks 构建完整的模态组件 🌈

从头开始的 Modal 组件

嗨，大家好 ！

上周，我们讨论了5 个自定义 React Hooks ！很多人都分享了这篇文章。所以这周，我们继续学习 React，并学习如何在不安装任何包的情况下实现一个 Modal 组件！

从头开始的 Modal 组件

在开始之前，以下是我们将在本教程中使用的元素：

• React Hooks
• ReactDOM 的门户
• 一点点 CSS

让我们从我们的modal.jsx（或modal.js）文件开始！

我们的组件：

让我们从基础开始：创建我们的函数组件。目标是将任意内容添加到模态框中，并管理组件的打开和关闭。

其次，我们想要一个独立于应用程序的模态框。我们不想z-index在 CSS 或其他方面有任何顾虑overflow。所以，让我们把这个组件插入到 DOM 中的其他位置。但是怎么做呢？

让我们来介绍一下来自 ReactDOM 的 Portals！

门户提供了一种在 DOM 节点中渲染子项的方法，该节点存在于 DOM 组件层次结构之外，即React 应用程序的#root或div 之外。#app

首先，我们添加一个新的 div，html并赋予它一个 'modal-app' ID。React 不会创建新的 div，而是显示该div中的modal-app子元素。

请注意，#modal-app可以是 DOM 的任何有效元素（div，， ...），无论section其span位置如何。

为了将我们的组件插入到这个#modal-appdiv 中，让我们使用createPortal()ReactDOM 提供的方法。

尽管 Portal 可以位于 DOM 树中的任何位置，但它在其他方面的行为与普通的 React 子节点相同。无论子节点是否为 Portal，上下文等功能都完全相同，因为无论 Portal 在 DOM 树中的位置如何，它都仍然存在于 React 树中。

来源：门户网站 - React

因此，让我们像这样为我们的组件包含这个方法：

打开模态框

从逻辑上讲，父组件会请求打开模态框。但我们该怎么做呢？

首先，让我们向Modal组件添加一个本地状态，以便知道模式是否打开。

useState允许我们使用布尔值创建状态。propdefaultOpened会告诉我们是否要在创建时直接打开模态窗口。false这是默认值。

• isOpen true=== 模态框已打开
• isOpen false=== 模态框已关闭

我们使用JavaScript 条件运算符进行条件渲染。

然后，为了让父母改变这个本地状态，你必须调用“refs”。

这就是useRef、useImperativeHandle和forwardRef发挥作用的地方。

要从父组件调用setIsOpen，我们需要附加对Modal 的引用。

• useRef用于附加对我们的模态的引用。
• forwardRef用于将引用转发到Modal组件。
• useImperativeHandle用于向父组件公开方法。

关闭模态框

然后，有几种方法可以离开模态框。

• 通过单击模式内容之外。
• 通过使用我们内容的小十字（x） 。
• 通过使用键盘的ESCAP键。

首先，让我们捕获keydown事件并检查用户是否使用了键盘的 ESCAP 键。

useEffect允许我们仅在模态框打开时创建事件监听器keydown。如果用户使用键盘上的 ESCAP 键，则模态框关闭。

结果是：

CSS！

您可以在此处找到 css 代码。

用法

• 演示：https ://react-modal.viclafouch.vercel.app
• 源代码：https：//gist.github.com/viclafouch/6ee36b2cb7d28484d20f05e68b3433f9

瞧！欢迎随意添加您自己的修改！

干杯

⚖️ 5 个适用于你的 React 应用的实用且现代的自定义 Hooks 🌟

维克多·德拉·富沙尔迪埃 · Jun 17 '20

#react #javascript #productivity #showdev

🎭 一个基于 React Hooks + Express 的全栈表情包生成器 🪐

维克多·德拉·富沙尔迪埃 · 2020 年 6 月 2 日

#showdev #webdev #react