React获取DOM节点

文章目录

  • 使用 useRef
  • 使用 createRef
  • 使用回调函数形式

在React中,通常不推荐直接操作DOM节点,因为React通过其虚拟DOM(Virtual DOM)来管理DOM的更新,以确保性能优化和一致性。
然而,在某些情况下,你可能需要直接访问DOM节点。React提供了几种方法来实现这:

使用 useRef

const myRef = useRef(null);

在函数式组件中:

import React, { useRef, useEffect } from 'react';  function MyComponent() {  const myRef = useRef(null);  useEffect(() => {  if (myRef.current) {  // 在这里,myRef.current 是DOM节点  console.log(myRef.current);  }  }, []);  return <div ref={myRef}>Hello, World!</div>;  
}

使用 useRef 来创建一个 ref ,并将其附加到一个 <div> 元素上,这样可以访问 myRef.current 来获取该 <div> 的DOM节点。


使用 createRef

myRef = React.createRef();

在类组件中:

import React from 'react';  class MyComponent extends React.Component {  myRef = React.createRef();  componentDidMount() {  // 在这里,this.myRef.current 是DOM节点  console.log(this.myRef.current);  }  render() {  return <div ref={this.myRef}>Hello, World!</div>;  }  
}

注意:createRef 已被列为过时的 API,不再推荐在最新代码中使用


使用回调函数形式

ref={c => this.myRef = c}

在类组件中:

import React from 'react';  class MyComponent extends React.Component {  myRef = null; // 在类组件中定义一个实例属性来保存DOM节点  // 组件挂载或更新后,可以访问this.myRef来获取DOM节点  componentDidMount() {  console.log(this.myRef); // 访问DOM节点  console.log(this.myRef.value); // 获取input值}  render() {  return (  <div>  <input ref={c => this.myRef = c} type="text" />  {/* 当input被挂载或更新时,this.myRef会被设置为对应的DOM节点 */}  </div>  );  }  
}  export default MyComponent;

官方更建议使用函数组件的 useRef

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

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

相关文章

[SWPUCTF 2022 新生赛]ez_1zpop(php反序列化之pop链构造)

[SWPUCTF 2022 新生赛]ez_ez_unserialize <?php class X {public $x __FILE__;function __construct($x){$this->x $x; }function __wakeup(){if ($this->x ! __FILE__) {$this->x __FILE__; }}function __destruct(){highlight_file($this->x);//flag is…

称重显示模块 Modbus RTU 通信

目录 一、智能称重数字显示器模块(带通信)1、称重传感器接线说明称重显示模块称重传感器USB 转 TTL 2、校准传感器&#xff08;标定&#xff1a;零点标定、满度标定&#xff09; 二、Modbus RTU 协议1、Modbus RTU 数据帧2、数据帧格式请求帧响应帧 三、上位机电脑与称重显示模…

携手知名律所,合合信息旗下名片全能王打造数字化名片“新范式”

在低碳办公理念盛行的当下&#xff0c;数字名片成为商务交流的新方式&#xff0c;以数字化智能化赋能绿色化。近期&#xff0c;合合信息旗下名片全能王企业数字名片升级&#xff0c;与上海市律师协会、广州市律师协会、北京大成&#xff08;上海&#xff09;律师事务所等多家律…

MySQL 8.0 安装、配置、启动、登录、连接、卸载教程

目录 前言1. 安装 MySQL 8.01.1 下载 MySQL 8.01.2 安装 MySQL 8.0 2. 配置 MySQL 8.02.1打开环境变量2.2新建变量 MYSQL_HOME2.3编辑 Path 变量 3. 启动MySQL 8.03.1验证安装与配置是否成功3.2初始化并注册MYSQL3.3 启动MYSQL服务 4.登录MySQL4.1修改账户默认密码4.2登录MYSQL…

【产品经理】发票系统简述

一、发票类型 增值税电子普通发票&#xff1a;简称电票 增值税普通发票和增值税专用发票&#xff0c;简称&#xff1a;纸票 蓝票&#xff1a;开票金额为正值的发票。红票&#xff1a;发票金额为负值的发票。 注&#xff1a;专票电子化系统国家目前在推&#xff0c;后续有更新…

三、网络服务协议

目录 一、FTP&#xff1a;文件传输协议 二、Telnet&#xff1a;远程登录协议 三、AAA认证 四、DHCP 五、DNS 六、PPP协议 七、ISIS协议 一、FTP&#xff1a;文件传输协议 C/S架构&#xff0c;现多用于企业内部的资料共享和网络设备的文件传输&#xff0c;企业内部搭建一…

【CT】LeetCode手撕—5. 最长回文子串

目录 题目1-思路2- 实现⭐5. 最长回文子串——题解思路 3- ACM实现 题目 原题连接&#xff1a;5. 最长回文子串 1-思路 子串的定义&#xff1a;子串是原始字符串的一个连续部分子序列的定义&#xff1a;子序列是原始字符串的一个子集记录最长回文子串的起始位置以及其长度&am…

字节跳动基础架构两篇论文入选 VLDB 2024

2024 年 8 月 26 至 30 日&#xff0c;VLDB 2024 将在中国广州举行。字节跳动基础架构云原生中间件团队、批式计算团队研究成果分别被 VLDB 2024 接收&#xff0c;并受邀进行现场报告。 VLDB&#xff08;International Conference on Very Large Data Bases&#xff09;是数据…

ESP32-C6 闪耀 Apple WWDC24|使用 Embedded Swift 构建 Matter 设备

WWDC 是苹果公司的年度全球开发者大会&#xff0c;旨在向全球开发者展示最新技术和工具。在今年的 WWDC 2024 上&#xff0c;苹果宣布将 Swift 语言扩展至嵌入式设备领域。大会技术讲座中&#xff0c;乐鑫 ESP32-C6 也现身官方 Demo “Go Small with Embedded Swift​​​​​​…

Vue路由的使用

如图所示&#xff1a; 1.首先创建文件&#xff0c;views中有以上示例图看到的创建的以下路由页面名称&#xff1a; 这个是创建的名字&#xff0c;为了方便看清我把第1步创建的名字写在下面了&#xff0c;为了方便看到这篇文章&#xff0c;创建名字不明白的可以按照我这个名创建…

怎么推导顺序统计量的分布函数?求证下图?

倒腾了一下午( ͡ ͜ʖ ͡)✧ 老师ppt猝不及防po了这么一个式子&#xff0c;本科基础没学好的渣渣查了一个多小时才搞懂 ヾ(▽*))) 手写笔记

便捷生活,从便民平台开始

想要生活更轻松、更便捷吗&#xff1f;那就来试试我们的便民平台吧&#xff01;生活中的琐事总是让人头疼不已&#xff0c;但有了我们的便民平台&#xff0c;一切问题都迎刃而解&#xff01; 咸阳便民平台的张总说&#xff1a;无论您是需要家政服务、维修安装&#xff0c;还是寻…

yolov8通过训练完成的模型生成图片热力图--论文需要

源代码来自于网络 使用pytorch_grad_cam&#xff0c;对特定图片生成热力图结果。 安装热力图工具 pip install pytorch_grad_cam pip install grad-cam# get_params中的参数&#xff1a; # weight&#xff1a; # 模型权重文件&#xff0c;代码默认是yolov8m.pt # c…

【设计模式】行为型-模板方法模式

方法千变万化&#xff0c;心灵如潮&#xff0c;模板如画&#xff0c;画出生活的韵味。 文章目录 一、茶与咖啡二、模板方法模式三、模板方法模式的核心组成四、运用模板方法模式五、模板方法模式的应用场景六、小结推荐阅读 一、茶与咖啡 场景假设&#xff1a;我们需要完成茶…

基于Unet++在kaggle—2018dsb数据集上实现图像分割

目录 1. 作者介绍2. 理论知识介绍2.1 Unet模型介绍 3. 实验过程3.1 数据集介绍3.2 代码实现3.3 结果 4. 参考链接 1. 作者介绍 郭冠群&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2023级研究生 研究方向&#xff1a;机器视觉与人工智能 电子邮件&#xff…

Go变量作用域精讲及代码实战

1. 变量的作用域概述 在编程中&#xff0c;变量的作用域&#xff08;Scope&#xff09;定义了变量在程序中的可见性和生命周期。理解变量的作用域对于编写健壮且可维护的代码至关重要。Go语言&#xff08;简称Go&#xff09;提供了几种不同的作用域类型&#xff0c;使得开发者可…

在大数据时代:为何硬盘仍是数据中心存储的核心

在云计算和人工智能应用场景不断涌现的时代背景下&#xff0c;数据集的价值急剧上升&#xff0c;硬盘对于数据中心运营商来说变得比以往任何时候都更为关键。硬盘存储了全球大部分的艾字节&#xff08;EB&#xff09;数据&#xff0c;行业分析师预计&#xff0c;在艾字节持续增…

Oracle数据库面试题-10

1. 描述Oracle数据库体系结构的主要组件。 Oracle数据库体系结构由多个组件组成&#xff0c;这些组件协同工作以确保数据的存储、处理和安全性。以下是Oracle数据库的一些主要组件&#xff1a; 数据库实例&#xff08;Database Instance&#xff09;&#xff1a;Oracle数据库的…

华为手机USB调试调过登录

【抓包工具】配置&#xff1a;绕过华为手机打开 USB 调试需要先登录华为账号问题 参考上面的文章。但是可能因为没有登录账号&#xff0c;没法切到生产模式。 登录荣耀账号&#xff0c;再试就可以了&#xff0c;记得默认允许电脑调试&#xff0c;然后退出荣耀账号

C++:十大排序

目录 时间复杂度分析 选择排序 引言 算法思想 动图展示 代码实现 (升序) 优化 代码实现 分析 冒泡排序 引言 算法思想 动图展示 代码实现 插入排序 引言 算法思想 动图展示 代码实现 计数排序 引言 算法思想 动图展示 代码实现 桶排序 引言 算法思…