React使用refs操作DOM方法详解
更新时间：2022年11月01日 17:21:05 作者：-耿瑞-
React核心就在于虚拟DOM，也就是在React中不总是直接操作页面真实的DOM元素，并且结合Diffing算法，可以做到最小化页面重绘，有些时候不可避免的我们需要一种方法可以操作我们定义的元素标签，并作出对应的修改。在React中提供了一种访问DOM节点的方式，也就是这里的refs
在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了react中Suspense的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了React嵌套组件的构建顺序，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家详细介绍了react实现简单的拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了react国际化react-intl的使用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
在 React 中进行路由跳转有多种方法,具体取决于你使用的路由库和版本,以下是常见的路由跳转方法汇总,主要基于 react-router-dom 库,文中并通过代码示例介绍的非常详细,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了详解使用WebPack搭建React开发环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了react循环数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家详细介绍了React实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，本文主要介绍了基于React封装组件的实现步骤，感兴趣的可以了解一下2021-11-11
最新评论