React使用refs操作DOM方法详解

在react框架 甚至说是三大框架中都是不太支持大家直接去操作dom的

因为也没什么必要

当然也会有特殊情况 例如视频播放 强制动画 第三方插件的一些渲染或初始化

官方也给了我们对应的解决办法

那就是refs

我们来简单写一个 我们先在constructor中定义一个虚拟dom的控制

参考代码如下

constructor(props){
 super(props);
 this.divDaimin = React.createRef()
 this.state = {
 }
}

这里 我们就通过React提供给我们的createRef函数声明了一个叫divDaimin的控制dom节点

叫什么你们随意 可以声明无数个 这个对数量没有限制

然后我们在页面上去写一个节点给我们声明的divDaimin 去控制

<div className="App">
   <div ref = { this.divDaimin }>你好</div>
</div>

这样 我们这块div元素就被divDaimin管理了

然后 componentDidMount生命周期是在页面dom节点挂载完之后执行的 那么我们就在componentDidMount生命周期里打印一下这个divDaimin

componentDidMount(){
 console.log(this.divDaimin);
}

运行后效果如下

通过控制台信息我们可以看到 current字段对应的就是我们的元素

我们改一下componentDidMount内的代码

componentDidMount(){
   console.log(this.divDaimin.current);
 }

很明显 我们的元素已经是被输出在控制台上了

为了帮助大家确认我们确实是拿到这个元素了

我们改写componentDidMount中的代码

componentDidMount(){
     this.divDaimin.current.style.color = "red";
  }

我们用一个常规的js dom操作 将他的字体颜色改为红色

没有任何问题 这个东西一般情况下都是可以满足你的需求的 甚至在react项目中他好可以帮助你实现更多你自己没接触过的用途

到此这篇关于React使用refs操作DOM方法详解的文章就介绍到这了,更多相关React操作DOM内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ReactDOM 隐藏特性详解

    ReactDOM 隐藏特性详解

    目录 前言 React DevTools 的原理 渲染阶段 FiberRoot/FiberNode memoizedState 与 React Hooks 实践:突破 useDebugValue 的限制 useDebugValueAnywhere 的实现 特定的 devtools 总结 前言 有过 React 经验的开发者可能都使用过 React DevTools. DevTools 提供了丰富的能力:展示组件树,组件的 props 与组件中 hook 的值. React DevTools 是如

  • 浅谈React Refs 使用场景及核心要点

    浅谈React Refs 使用场景及核心要点

    目录 什么是 Refs? 使用方式 Refs 核心要点 避免重复创建 ref 内容 ref.current 存储的内容修改是突变 ref 作为数据存储时内容的变化不会引起 re-render ref 的读写只能在 useEffect 或者回调函数中进行 跨组件传递ref 获取dom时需要借助 forwardRef 包裹组件 ref 绑定的dom在离屏或者未挂载时ref.current 值会被修改为null 最佳实践 dom 操作相关 用于在两次 render 之间传递数据 在使用 React 进

  • React中的Refs属性你来了解吗

    React中的Refs属性你来了解吗

    目录 1介绍 2使用方法 2.1createRef(版本>=React16.3) 2.2回调Refs 2.3String类型的Refs(已过时,不推荐使用) 2.4useRef(ReactHooks) 总结 1 介绍 react组件的三大属性: 1.props属性:封装传递给组件的参数 2.state属性:组件的状态,当值发生改变后,重新渲染组件 3.refs属性: (1)通过该属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) ——DOM元素或render函数中的

  • 详解React获取DOM和获取组件实例的方式

    目录 React获取DOM的方式 ref获取DOM元素 ref获取组件实例 React获取DOM的方式 ref获取DOM元素 在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播放; 触发强制动画; 集成第三方 DOM 库; 我们可以通过refs获取DOM; 如何创建refs来获取对应的DOM呢?目前有三种方式: 方式一:传入字符串(这种做法已经不推荐) 在React元素上绑定一个ref字符串,

  • 深入浅析React refs的简介

    深入浅析React refs的简介

    一.是什么 Refs在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素 本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点 二.如何使用 创建ref的形式有三种: 传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素 传入对象,对象是通过 React

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • React中DOM事件和状态介绍

    目录 DOM事件 参数 作用域 状态 无状态组件 有状态组件 使用状态数据 初始化状态数据 修改状态数据 DOM事件 react中绑定事件的语法跟html中为元素绑定事件的语法相似, html中绑定事件: <div onclick="fn"></div>     react中绑定事件 <div onClick={this.fn}></div> 注意: 1 事件名称首字母必须大写 2 事件回调函数定义在组件中,我们通过插值语法引入绑定 3

  • React使用refs操作DOM方法详解

    React使用refs操作DOM方法详解

    在react框架 甚至说是三大框架中都是不太支持大家直接去操作dom的 因为也没什么必要 当然也会有特殊情况 例如视频播放 强制动画 第三方插件的一些渲染或初始化 官方也给了我们对应的解决办法 那就是refs 我们来简单写一个 我们先在constructor中定义一个虚拟dom的控制 参考代码如下 constructor(props){ super(props); this.divDaimin = React.createRef() this.state = { } } 这里 我们就通过Reac

  • JavaScript操作DOM对象详解

    JavaScript操作DOM对象详解

    一.DOM基础 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)可以理解为类似Window对象之类的东西,可以调用属性和方法,这里我们说的是document对象:M(模型)可以理解为网页文档的树型结构. 1.节点 加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内

  • MySQL数据库设计之利用Python操作Schema方法详解

    弓在箭要射出之前,低声对箭说道,"你的自由是我的".Schema如箭,弓似Python,选择Python,是Schema最大的自由.而自由应是一个能使自己变得更好的机会. Schema是什么? 不管我们做什么应用,只要和用户输入打交道,就有一个原则--永远不要相信用户的输入数据.意味着我们要对用户输入进行严格的验证,web开发时一般输入数据都以JSON形式发送到后端API,API要对输入数据做验证.一般我都是加很多判断,各种if,导致代码很丑陋,能不能有一种方式比较优雅的验证用户数据呢

  • 在自动化中用python实现键盘操作的方法详解

    原来在robotframework中使用press key方法进行键盘的操作,但是该方法需要写被操作对象的locator,不是很方便,现在找到了一种win32api库写键盘操作的一个方法(注意:此方法被操作界面必须在顶层),首先,需要安装win32api的python库,使用命令: pip install pywin32 具体实现代码如下: import win32api import win32con class MyLibrary(object): def keybd_event(self,

  • 鸿蒙开发之处理图片位图操作的方法详解(HarmonyOS鸿蒙开发基础知识)

    位图操作开发指导 图操作就是指对PixelMap图像进行相关的操作,比如创建.查询信息.读写像素数据等. 1.创建位图对象PixelMap // 指定初始化选项创建 PixelMap pixelMap2 = PixelMap.create(initializationOptions); // 从像素颜色数组创建 int[] defaultColors = new int[] {5, 5, 5, 5, 6, 6, 3, 3, 3, 0}; PixelMap.InitializationOption

  • R语言操作文件方法详解教程

    R语言操作文件方法详解教程

    目录 1. 文件与文件夹列表的读取 2. 新建文件与文件夹 3. 文件与文件夹的删除 4. 查看文件与文件夹是否存在 小练习 由于最近在处理一些真实数据时涉及到嵌套的 .tar.gz 文件的解压,手动一个一个解压过于麻烦.可以使用 shell 脚本或者 bat 脚本来做,但想尝试使用 R 语言对其进行完全解压,这里就需要涉及到对文件与文件夹的一些操作. 网上已经有许多现有教程,这里参考了很多网上的代码,不过会尝试尽量写得更加详细. 整篇文章我们的测试目录结构如下(生成目录结构树,可以直接在当前路

  • Python自动化操作Excel方法详解(xlrd,xlwt)

    Python自动化操作Excel方法详解(xlrd,xlwt)

    目录 一.Python操作Excel 7大库对比 二.xlrd 读取excel操作 1. 打开文件 2. 获取所有表名 3. 指定sheet表 4. 对sheet表的行操作 5. 对sheet表的列操作 三.xlwt 写入Excel表操作 1. 写入单个数据 2. 写入多个数据 3. 设置列宽 4. 设置行高 5. 设置单元格风格 一.Python操作Excel 7大库对比 Excel是Windows环境下流行的.强大的电子表格应用.无论是在工作中还是学习中我们都几乎在不间断的使用Excel来

  • React文件分段上传实现方法详解

    目录 原理 方案 antd Upload 文件分片 MD5 发送分片请求 显示上传进度 最近做了大文件(文件夹)分片上传的需求,记录一下. 原理 前端进行大文件分片上传的方案几乎都是利用Blob.prototype.slice方法对文件进行分片,用数组将每一个分片存起来,最后将分片发给后端.由于并发的原因,需要给每个分片给定index,方便后端进行拼接. 方案 我在做需求之前看了网上的一些方案,大多数是前端进行分片.发送分片,在发送完所有分片请求之后,再给后端发送一个合并文件的请求.但其实也可以

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • C# SQLite序列操作实现方法详解

    C# SQLite序列操作实现方法详解

    本文实例讲述了C# SQLite序列操作实现方法.分享给大家供大家参考,具体如下: sqlite 不能直接创建自定义函数,不能像 sql server中那样方便创建并使用.不过我们照样可以创建它,创建成功后,我们照样可以随心所欲(比如批量更新等) 序列是一个数据库中很常用的操作,在其它关系型数据库创建是相当简单的,但Sqlite不是很方便,因为它不能直接创建自定义函数 1.先创建一个表示序列的表: CREATE TABLE SEQUENCE ( SEQ_NAME VARCHAR(50) NOT

随机推荐