react中使用ResizeObserver来观察元素的size变化

在 React 中使用 ResizeObserver 来观察元素的大小变化,可以通过创建一个自定义 Hook 来封装 ResizeObserver 的逻辑,并在组件中使用这个 Hook。以下是一个完整的示例,展示了如何在 React 中使用 ResizeObserver 来观察元素的大小变化。

自定义 Hook

首先,创建一个自定义 Hook 来封装 ResizeObserver 的逻辑:

import { useEffect, useRef, useState } from 'react';const useResizeObserver = () => {const [size, setSize] = useState({ width: 0, height: 0 });const elementRef = useRef(null);useEffect(() => {const resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {setSize({width: entry.contentRect.width,height: entry.contentRect.height});}});if (elementRef.current) {resizeObserver.observe(elementRef.current);}return () => {if (elementRef.current) {resizeObserver.unobserve(elementRef.current);}resizeObserver.disconnect();};}, []);return [elementRef, size];
};export default useResizeObserver;

解释

  1. useResizeObserver Hook:创建一个自定义 Hook,返回一个 ref 和元素的大小。
  2. useState:用于存储元素的大小。
  3. useRef:用于引用要观察的元素。
  4. useEffect:在组件挂载时创建 ResizeObserver 实例,并在组件卸载时清理观察器。
  5. resizeObserver.observe:开始观察元素的大小变化。
  6. resizeObserver.unobserve 和 resizeObserver.disconnect:停止观察元素的大小变化并断开观察器。

使用自定义 Hook

在组件中使用这个自定义 Hook 来观察元素的大小变化:

import React from 'react';
import useResizeObserver from './useResizeObserver';const MyComponent = () => {const [elementRef, size] = useResizeObserver();return (<div><div ref={elementRef} style={{ width: '50%', height: '200px', backgroundColor: 'lightblue' }}>Resize me!</div><p>Width: {size.width}px</p><p>Height: {size.height}px</p></div>);
};export default MyComponent;

解释

  1. useResizeObserver Hook:在组件中调用自定义 Hook,获取 ref 和元素的大小。
  2. ref 属性:将 ref 赋值给要观察的元素。
  3. 显示元素的大小:在组件中显示元素的宽度和高度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65039.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧社区电子商务系统:实现社区资源的数字化管理

2.1vue技术 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项…

【Rust自学】6.2. Option枚举

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 6.2.1. 什么是Option枚举 它定义于标准库中&#xff0c;在Prelude&#xff08;预导入模块&#xff09;中&#xff0c;负责描述这样的场景…

【软件项目管理】-期末突击

区别常见的项目和活动 项目和活动的区别&#xff1a; 定义&#xff1a; 项目&#xff1a;为创造独特成果而进行的临时性工作。活动&#xff1a;日常运营中的重复性工作。 目标&#xff1a; 项目&#xff1a;实现特定成果&#xff0c;一次性。活动&#xff1a;维持日常运作&am…

OpenResty开发环境搭建

简介 OpenResty 是一个基于 Nginx的高性能 Web 平台&#xff0c;用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。官方地址&#xff1a;http://openresty.org/cn/ 具备下列特点&#xff1a; 具备Nginx的完整功能基于Lua语言进行扩展&#…

突发!GitLab将停止对中国区用户提供GitLab.com账号服务

突发!GitLab将停止对中国区用户提供GitLab.com账号服务 近日,被视为全球第二大开源代码托管和项目管理平台的 GitLab 宣布其将对中国区用户停止提供 GitLab.com 账号服务,建议现有用户迁移到极狐。中国 IP 地址现在访问 GitLab.com 页面会弹出下面窗口且直接转到 about.git…

【C++】ceil 和 floor 函数的实现与分析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;ceil 和 floor 函数的基础介绍1. ceil 函数定义与功能示例代码输出结果功能分析使用场景 2. floor 函数定义与功能示例代码输出结果功能分析使用场景 &#x1f4af;自行实现…

合合信息:探索视觉内容安全新前沿

2024年12月13日-15日&#xff0c;中国图象图形学学会在杭州召开。大会期间&#xff0c;来自合合信息的图像算法研发总监郭丰俊进行了主题为“视觉内容安全技术的前沿进展与应用”的演讲&#xff0c;介绍了视觉内容安全问题&#xff0c;并总结了现今的技术发展&#xff0c;对我很…

【JetPack】Navigation知识点总结

Navigation的主要元素&#xff1a; 1、Navigation Graph&#xff1a; 一种新的XML资源文件,包含应用程序所有的页面&#xff0c;以及页面间的关系。 <?xml version"1.0" encoding"utf-8"?> <navigation xmlns:android"http://schemas.a…

教师如何打造专属私密成绩查询系统?

期末的校园&#xff0c;被一种特殊的氛围所笼罩。老师们如同辛勤的工匠&#xff0c;精心打磨着每一个教学环节。复习阶段&#xff0c;他们在知识的宝库中精挑细选&#xff0c;把一学期的重点内容一一梳理&#xff0c;为学生们打造出系统的复习框架。课堂上&#xff0c;他们激情…

.NET周刊【12月第3期 2024-12-15】

国内文章 重磅推出 Sdcb Chats&#xff1a;一个全新的开源大语言模型前端 https://www.cnblogs.com/sdcb/p/18597030/sdcb-chats-intro Sdcb Chats是一个新推出的开源大语言模型前端&#xff0c;旨在提升用户交互体验&#xff0c;并填补市场上基于.NET的前端空白。它引入树状…

专栏二十三:Python读取和分析空间数据的经验杂谈

部分情况同样适合单细胞的分析结果 读取数据阶段 1.错误的library_id 包括sc和sq的两种读取方式&#xff0c;大同小异。 理论上有h5数据和spatial文件夹就可以读取成功&#xff0c;并且自动赋予和文件名一样的library_id&#xff0c;例如 slide sq.read.visium("/ho…

Pandas系列|第二期:Pandas中的数据结构

1.Pandas中的数据结构&#xff1a;Series和DataFrame Pandas 的主要数据结构是 Series &#xff08;一维数据&#xff09;与 DataFrame&#xff08;二维数据&#xff09;&#xff0c;这两种数据结构足以处理金融、统计、社会科学、工程等领域里的大多数典型用例。 Series 是一…

如何在谷歌浏览器中启用语音搜索

想象一下&#xff0c;你正在拥挤的地铁上&#xff0c;双手都拿着沉重的购物袋&#xff0c;突然你想搜索附近的咖啡馆。此时如果你能通过语音而不是打字来进行搜索&#xff0c;那将多么的便利&#xff01;在谷歌浏览器中&#xff0c;启用语音搜索功能就是这么简单而高效&#xf…

GCP GCA认证考试Case错题库1(JenciMart+Helicopter+EHR)

GCP GCA认证考试Case错题库1(JenciMartHelicopterEHR) 整理by Moshow郑锴https://zhengkai.blog.csdn.net/ JenciMart 在生产和开发资源之间进行管理职责分离的最小权限模型中&#xff0c;最佳实践是每个应用程序的每个阶段都有自己的项目。这种设置确保权限是细化的&#xf…

MySQL HA 方案 MMM、MHA、MGR、PXC 对比

MySQL高可用架构 MMM (Multi Master Replication Manager) 资源数量说明主DB2用于主备模式的主主复制从DB0~N台可以根据需要配置N台从服务器IP地址2n1N为MySQL服务器的数量监控用户1用户监控数据库状态的MySQL用户(replication)代理用户1用于MMM代理端改变read_only状态 故障…

ISO17025最新认证消息

ISO17025认证是国际上广泛认可的实验室管理标准&#xff0c;全称为《检测和校准实验室能力的通用要求》&#xff0c;由国际标准化组织&#xff08;ISO&#xff09;和国际电工委员会&#xff08;IEC&#xff09;联合发布。以下是对ISO17025最新认证消息及相关内容的归纳&#xf…

npm淘宝镜像

通过命令行配置npm的淘宝镜像源和官方镜像源&#xff0c;以及如何安装和使用cnpm来解决安装包卡顿或无法安装的问题。通过设置registry和disturl&#xff0c;配合清理缓存&#xff0c;可以优化npm的下载速度。 1、​官方默认镜像 npm config set registry https://registry.n…

java12.24日记

运算符&#xff1a; 算术运算符&#xff1a; 顾名思义进行算数运算的 多为&#xff1a;四则运算&#xff0c;加一个取余 &#xff0c;-&#xff0c;*&#xff0c;/以及 %&#xff08;取余&#xff09; 而外的&#xff1a;自增 以及自减--&#xff0c;对原数进行1或者-1 i…

SAP SD销售订单处理流程

本篇博文中的流程&#xff1a; 创建销售订单→依据销售订单创建交货单→依据销售订单开票 一、VA01创建销售订单 1、填入必填项&#xff0c;回车。可点击左上角的依照参考创建按钮。 依照参考创建可以参考以下6个。其中询价单、报价单、订单、合同和计划协议可以理解为特殊的…

内网穿透ubuntu20 docker coplar

sudo apt-get install curl curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash ubuntu-base报错 /sbin/init:No such file or directory解决办法 apt install systemd 命令安装即可 cpolar version 1.3 token认证 登录cpolar官网后台…