使用自定义 Hook 构建 React 模态组件

最新推荐文章于 2024-09-26 10:39:16 发布
最新推荐文章于 2024-09-26 10:39:16 发布
阅读量146 收藏
点赞数
分类专栏： JavaScript 教程集合 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52010446/article/details/130947267
版权
本文指导读者如何使用Create React App搭建应用，并创建一个名为`useModal.js`的自定义Hook，以及一个`Modal.js`组件。模态组件通过`visiblePortal`属性定位在DOM的最后，以满足可访问性需求。在`App.js`中整合组件，并通过`App.css`添加样式进行测试。这是一个简单的模态组件示例，适用于未来项目的定制。
摘要由CSDN通过智能技术生成

在本教程中，我们将构建一个自定义 React 模态组件，该组件可用于显示各种 Web 元素，包括：表单、警报消息或图像。

让我们开始使用Create React App来设置我们的应用程序：

npx create-react-app react-modal

在该/src文件夹中创建一个名为的新文件，useModal.js该文件将包含useModal()自定义 Hook。自定义 Hooks 应该始终以开头，use以便您可以快速判断它是一个可重复使用的 Hook：

import {
    useState } from 'react';

const useM
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Q shen
关注
专栏目录
订阅专栏
推荐10个实用的 React 自定义hooks
zz_jesse的博客
08-07 63
什么是自定义 hook？在 React 中，自定义 hook 是一个利用一个或多个内置 hook（如 useState、useEffect、useContext 等）的 JavaScript 函数。自定义 hook 提供了一种提取和共享 React 组件逻辑的方法，促进代码的清晰、组织的改善和生产力的提升。创建 React 中的自定义 hook 遵循一套特定的规则和语法。自定义 hook 应始终以...
React 的 Hooks构建自定义组件-随机验证码
qq_33573631的博客
07-17 661
react项目里面要求在登录的时候输入一个随机验证码 效果是这样的： 搜索了一下，其他的写法都没有把随机验证码抽出来当组件写，所以这里分享一下 可传参配置验证码的大小、范围、长度以及颜色范围和干扰项配置，复制代码可用。 在这解释一下组件传参： state：是传入自定义配置的随机验证码 changeRadomNumber ：是一个函数，返回当前生成的随机码，用做判断输入验证码是否与生成验证码一致。 自定义随机验证码组件代码如下： import React, { useEffect, useRef } fro
React Hook - 自定义Hook的基本使用和案例练习
热门推荐
m0_71485750的博客
10-30 1万+
自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。例如有这样一个需求: 所有的组件在创建和销毁时都进行打印组件被创建: 打印组件被创建了;组件被销毁: 打印组件被销毁了;如果每个组件我们都单独编写是非常繁琐的, 并且有许多重复代码;我们可以将实现这样逻辑相同的代码抽离为一个自定义的Hookimport {useEffect } from 'react' // 自定义Hook function useLogLife() {
自定义 React Hooks:编写高效、整洁和可重用代码的秘密武器
weixin_42429220的博客
01-19 1055
在本文中,我们将消除自定义 hooks 的概念的迷雾,深入探究它们的结构,并探索创建我们自己的过程。我们将采取实际的方法,举例来演示它们在真实场景中的用法。我们的目标不仅是理解自定义 hooks 是什么或它们如何工作。这是全面接受其背后的哲学并赏识它们为我们的代码带来的优雅、简单和强大。关键在于:hooks 很酷,但是自定义 hooks?它们就是可以使你的 React 代码水平更进一步的秘密配方。就像一个功能强大的工具,可以完全定制你的特定需求。一个为你量身定做的解决方案。
浅谈react如何自定义hooks
BradenHan的专栏
04-24 530
一句话：使用自定义hooks可以将某些组件逻辑提取到可重用的函数中。自定义hooks是一个从use开始的调用其他hooks的Javascript函数。
深度解析！Vue3 & React Hooks 新UI组件原理：Modal 弹窗
油墨香^-^的博客
09-13 540
useModal很好理解，不懂的建议转行写Vue。这篇算是自己半夜无聊折腾出来的，原定计划是一篇写三种组件，但弹窗类的实现比较有意思。这个系列我会看着写，不出意外下一篇就是讲Steps步骤条和Transfer穿梭框的实现（当然，太难了就忽悠一下，嘿嘿。
react-modal-hook:使用React Hooks来处理模态的语法糖
05-02
React模态钩 使用React Hooks处理模态窗口的语法糖。 该库不提供任何UI，但是提供了一种方便的方法来呈现在其他地方定义的模式组件。 对于简单的模态组件，请查看 ，它与该库配合使用。 目录 安装 npm install --...
use-async-modal:使用Hook for React.js以编程方式显示基于承诺的模态
03-07
使用React.js的钩子强制性地显示基于承诺的模态。 目录 安装 您可以使用或安装软件包： npm i use-async-modal yarn add use-async-modal 用法 首先，我们将需要一个组件模式来显示： export const Dialog = ( { ...
使用React Hook构建可复用的组件
React Hook是React 16.8引入的新特性，允许您在不编写 class 的情况下使用 state 和其他 React 特性。它是一种函数式编程的方式，能够帮助您更容易地复用逻辑，减少代码量，使组件更易于理解和维护。 ## 1.2 为什么...
use-modal:React Hook进行模式管理
04-08
useModal 处理最常见的用例以创建类似于Modal的组件： 进入/离开动画 按Escape键或在外部单击时关闭 呈现部分由您决定，此挂钩可用于模式，抽屉，下拉菜单以及几乎任何处于打开和关闭状态的东西。 用法 简单的例子 import * as React from 'react' const Modal = ( ) => { const [ open , setOpen ] = React . useState ( false ) const modal = useModal ( { open , onClose : ( ) => setOpen ( false ) } ) return ( < React> < button onClick = { ( ) => setOpen ( true ) } > Open < /
modali:用于React的令人愉悦的模态对话框组件，它是从头开始构建以支持React Hooks的
04-28
一个令人愉悦的React模态对话框库，它是从头开始构建以支持React Hooks的。 Modali提供了一个简单的界面，可在几分钟内构建漂亮的模态。 可以在上找到有关完整教程。 现场演示 安装 使用npm在您的项目中安装Modali...
高阶组件 ----- 自定义hook 两种实现
cdxgg1102225556的博客
04-02 361
自定义hook 的实现 必须是use开头 实例如下： 自定义组件： import React,{ useEffect, useState} from ‘react’ function Reuse() { const [xy,setXy] = useState({ x:0, y:0}) const one = (e) => { setXy({ x:e.clientX, y:e.clientY }) } useEffect( () => { document.addEventListener(‘mo
【实战】 二、React 与 Hook 应用：实现项目列表 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二）
程序边界
06-18 2941
具体配置、操作和内容会有差异，“坑”也会有所不同。提升到他们共同的父组件中，子组件通过解构。现在效果：可以通过项目名和人名筛选（全匹配）Custom Hook 可是代码复用利器。部分引用笔记还在草稿阶段，敬请期待。涉及两个不同组件，因此需要将这两个。原则，将接口调用URL中的。经过前面两步，状态提升并使用。只是关联查询的中间产物，内再次输入不会触发对。常用工具方法统一放到。按照数据库范式思维，
React Hooks： use modal
weixin_30609287的博客
08-01 779
useModal: export const useModal = (initTitle: string, initContent: string | React.ReactElement) => { const [visible, setVisible] = useState(false); const [title, setTitle] = useSt...
React 自定义hooks最佳实践
zmjのblog
09-14 3941
react hooks推出已经有一段时间了，而自定义hooks在hooks中其实是非常关键的一环，它是抽离业务逻辑和UI逻辑，复用代码的关键
弹窗案例实现（Ant Design + React hooks）
weixin_44693690的博客
10-24 3056
弹窗案例实现（Ant Design + React hooks)
react通过下拉框选择多个，并展示在下方的方式
最新发布
qq18346342939的博客
09-26 275
二、form及选择展示。
react自定义hook
06-05
React 自定义 Hook 是一种用于共享逻辑的方式，它可以将组件之间共享的状态逻辑抽离出来，实现代码复用。使用自定义 Hook，可以将组件中相互关联的部分拆分成更小的函数，让逻辑清晰、易于维护和测试。 自定义 Hook 是一个以 `use` 开头命名的函数，它可以在其中使用 React 内置的 Hook 或者其他自定义 Hook。自定义 Hook 返回的值可以是任意类型的数据，一般包含状态和操作状态的方法。 下面是一个自定义 Hook 的示例： ``` import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { try { const response = await fetch(url); const json = await response.json(); setData(json); } catch (e) { setError(e); } finally { setLoading(false); } } fetchData(); }, [url]); return { data, loading, error }; } ``` 这个自定义 Hook 实现了一个从远程 API 获取数据的功能，它返回了一个包含 `data`、`loading` 和 `error` 的对象。在组件中使用这个自定义 Hook 可以实现数据获取和状态管理的复用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Q shen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值