react组件中获取DOM元素的五种方式
更新时间：2025年01月15日 08:26:29 作者：小企鹅子慢慢
本文主要介绍了React组件中获取DOM元素的五种方式：包括使用ref属性、构造器创建全局变量、动态绑定ref属性、绑定函数定义全局变量和使用hook语法查找DOM,感兴趣的可以了解一下
1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)
<h1 ref="myH1"></h1>
this.refs.myH12, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用
this.myH2 = React.createRef()
<h2 ref={this.myH2}></h2>
this.myH2.current3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用
<h3 ref={ ele => this.myH3 = ele }></h3>
this.myH34, 使用hook语法查找DOM
const d1 = useRef()
<div id="d1" ref={d1}>div1</div>
d1.current5, 使用hook语法查找DOM
const d2 = useRef()
<div id="d2" ref={el => d2=el}>div1</div>
d2到此这篇关于react组件中获取DOM元素的五种方式的文章就介绍到这了,更多相关react Dom操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了react antd表格中渲染一张或多张图片的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,介绍了依赖项数组不同的区别,对react useEffect()使用相关知识感兴趣的朋友一起看看吧2024-05-05
useCallback 是 React 的一个 Hook,用于记忆函数定义,避免在每次渲染时创建新的函数实例,本文主要来介绍一下它的具体用法,需要的可以参考一下2025-01-01
这篇文章主要介绍了React使用ref方法与场景，React支持给任意组件添加特殊属性。ref属性接受一个回调函数，它在组件被加载或卸载时会立即执行2022-10-10
高性能React开发React Server Components详解
ReactServerComponents通过服务器端渲染、自动代码分割等技术,实现了高性能的React开发,它解决了客户端数据请求链式延迟、敏感数据暴露风险等问题,提供了更好的用户体验和安全性,本文介绍高性能React开发React Server Components详解,感兴趣的朋友一起看看吧2025-03-03
react组件memo useMemo useCallback使用区别示例
这篇文章主要为大家介绍了react组件memo useMemo useCallback使用区别的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了react如何实现表格多条件搜索问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了如何使用react-dnd编写一个可拖拽排列的list,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
React.memo React.useMemo对项目性能优化使用详解
这篇文章主要为大家介绍了React.memo React.useMemo对项目性能优化的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了浅谈箭头函数写法在ReactJs中的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论