react 获取dom(react useref获取dom元素)

React如何获取DOM并获取组件实例

文章目录

React获取DOMref的方式获取DOM元素ref获取组件实例

React获取DOM的方式

ref获取DOM元素

在React的开发模式中，通常不需要也不建议这样做直接操作DOM。原生，但在某些特殊情况下，确实需要获取DOM来执行某些操作：

管理焦点、文本选择或媒体播放；

触发强制动画；

集成第三方DOM库；

我们可以通过refs获取DOM；

如何创建refs来获取对应的DOM？目前有三种方式：

方法一：传入字符串

给React元素绑定一个ref字符串，使用时通过this.refs中传入的字符串格式获取对应的元素。

importReact,{PureComponent}from'react'exportclassAppextendsPureComponent{getDom(){//方法1console.log(this.refs.hello)//h2HelloWorld/h2}render(){return(divh2ref='hello'HelloWorld/h2按钮onClick={()=this.getDom()}获取DOM/按钮/div)}}导出默认App

方法二：传入对象

在react中导入createRef，通过createRef()提前创建一个对象，并将创建的对象与要获取的元素绑定；

使用时，获取创建对象的当前属性之一，即对应的元素；

importReact,{PureComponent,createRef}from'react'exportclassAppextendsPureComponent{constructor(){super()//提前创建一个ref对象this.titleRef=createRef()}getDom(){//方法二console。log(this.titleRef.current)//h2HelloWorld/h2}render(){return(divh2ref={this.titleRef}HelloWorld/h2按钮onClick={()=this.getDom()}获取DOM/按钮/div)}}导出默认应用程序

方法三：传入一个函数

该函数会在DOM挂载时回调。回调该函数时，会传入一个element对象，我们可以自己保存；

使用时直接获取之前保存的元素对象即可；

importReact,{PureComponent,createRef}from'react'exportclassAppextendsPureComponent{getDom(){}render(){return(divh2ref='hello'HelloWorld/h2h2ref={this.titleRef}HelloWorld/h2{/*方法三，回调函数会返回el，el就是我们要获取的DOM*/}h2ref={el=console.log(el)}HelloWorld/h2buttononClick={()=this.getDom()}获取DOM/button/div)}}

ref获取组件实例

ref的值根据节点类型不同而不同：

当在HTML元素上使用ref属性时，在构造函数中使用React.createRef()创建的ref接收底层DOM元素作为其当前属性；

当ref属性用于自定义类组件时，ref对象接收组件的已安装实例作为其当前属性；

您不能在函数组件上使用ref属性，因为它们没有实例；

这里我们演示ref如何获取类组件对象的实例：

importReact,{PureComponent,createRef}from'react'//创建一个类组件并将其作为子组件进行测试classTestextendsPureComponent{test(){console.log('Test');}render(){returnh2Test/h2}}exportclassAppextendsPureComponent{constructor(){super()this.tsetRef=createRef()}getDom(){//获取组件实例console.log(this.tsetRef.current)//可以调用组件的实例方法this.tsetRef.current.test()}render(){return(divTestref={this.tsetRef}//div)}}exportdefaultApp

功能组件没有实例，因此无法通过ref:获取其实例

但有时，我们可能想获取功能组件中的某个DOM元素；

这时，我们可以通过React.forwardRef来绑定函数组件中的一个元素。forwardRef接收两个参数，参数一为：props，参数二为：ref。稍后我们还将学习如何在hooks中使用ref；

import{render}from'@testing-library/react';importReact,{PureComponent,createRef,forwardRef}from'react'}//创建函数组件并将其作为子组件进行测试//使用forwardRef包装函数constFoo=forwardRef(function(props,ref){return(h2ref={ref}Foo/h2)})exportclassAppextendsPureComponent{constructor(){super()//提前创建一个ref对象this.fooRef=createRef()}getDom(){//获取函数组件中元素的DOMconsole.log(this.fooRef.current)}render(){return(divFooref={this.fooRef}//div)}}导出默认应用程序