react组件中获取DOM元素的五种方式

更新时间：2025年01月15日 08:26:29 作者：小企鹅子慢慢

本文主要介绍了React组件中获取DOM元素的五种方式：包括使用ref属性、构造器创建全局变量、动态绑定ref属性、绑定函数定义全局变量和使用hook语法查找DOM,感兴趣的可以了解一下

1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)

    <h1 ref="myH1"></h1>
    this.refs.myH1

2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用

    this.myH2 = React.createRef() 
    <h2 ref={this.myH2}></h2>
    this.myH2.current

3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用

    <h3 ref={ ele => this.myH3 = ele }></h3>
    this.myH3

4, 使用hook语法查找DOM

    const d1 = useRef()
    <div id="d1" ref={d1}>div1</div>
    d1.current

5, 使用hook语法查找DOM

    const d2 = useRef()
    <div id="d2" ref={el => d2=el}>div1</div>
    d2

到此这篇关于react组件中获取DOM元素的五种方式的文章就介绍到这了,更多相关react Dom操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React获取组件对应的DOM元素多种实现方法

React 实现表单组件的示例代码
本文主要介绍了React 实现表单组件的示例代码,支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能,具有一定的参考价值,感兴趣的可以了解一下
2024-07-07
React简单介绍
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它
2017-05-05
React Native如何消除启动时白屏的方法
本篇文章主要介绍了React Native如何消除启动时白屏的方法，详细的介绍了解决的方法，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
详解各版本React路由的跳转的方法
这篇文章主要介绍了详解各版本React路由的跳转的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
react中useRef的应用使用详解
这篇文章主要介绍了react中useRef的应用使用详解的相关资料,需要的朋友可以参考下
2023-05-05
React如何实现全屏监听Esc键
这篇文章主要介绍了React如何实现全屏监听Esc键，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React组件的用法概述
React组件用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，这篇文章主要介绍了React组件的用法和理解,需要的朋友可以参考下
2023-02-02
TypeScript在React中的应用技术实例解析
这篇文章主要为大家介绍了TypeScript在React中的应用技术实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
react组件memo useMemo useCallback使用区别示例
这篇文章主要为大家介绍了react组件memo useMemo useCallback使用区别的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
关于getDerivedStateFromProps填坑记录
这篇文章主要介绍了关于getDerivedStateFromProps填坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06

react组件中获取DOM元素的五种方式

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具