文章目录
- React获取DOM的方式
- ref获取DOM元素
- ref获取组件实例
React获取DOM的方式
ref获取DOM元素
在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:
管理焦点,文本选择或媒体播放;
触发强制动画;
集成第三方 DOM 库;
我们可以通过refs获取DOM;
如何创建refs来获取对应的DOM呢?目前有三种方式:
方式一:传入字符串
(这种做法已经不推荐)
在React元素上绑定一个ref字符串, 使用时通过
this.refs.传入的字符串
格式获取对应的元素;
import React, { PureComponent } from 'react'export class App extends PureComponent {getDom() {// 方式一console.log(this.refs.hello) // Hello World
}render() {return (<div><h2 ref="hello">Hello World</h2><button onClick={() => this.getDom()}>获取DOM</button></div>)}}export default App
方式二:传入一个对象
(常用的方式, 推荐)
在react中导入createRef, 通过
createRef()
方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时获取到创建的对象其中有一个
current
属性就是对应的元素;
import React, { PureComponent, createRef } from 'react'export class App extends PureComponent {constructor() {super()// 提前创建一个ref对象this.titleRef = createRef()}getDom() {// 方式二console.log(this.titleRef.current) // Hello World
}render() {return (<div><h2 ref={this.titleRef}>Hello World</h2><button onClick={() => this.getDom()}>获取DOM</button></div>)}}export default App
方式三:传入一个函数
(了解)
该函数会在DOM被挂载时进行回调,这个函数回调时会传入一个元素对象,我们可以自己保存;
使用时,直接拿到之前保存的元素对象即可;
import React, { PureComponent, createRef } from 'react'export class App extends PureComponent {getDom() {}render() {return (<div><h2 ref="hello">Hello World</h2><h2 ref={this.titleRef}>Hello World</h2>{/* 方式三, 回调函数会返回el, el就是我们要获取的DOM了 */}<h2 ref={el => console.log(el)}>Hello World</h2><button onClick={() => this.getDom()}>获取DOM</button></div>)}}
ref获取组件实例
ref 的值根据节点的类型而有所不同:
当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;
当 ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性;
你
不能在函数组件上使用 ref 属性
,因为他们没有实例;
这里我们演示一下ref获取一个class组件对象的实例:
import React, { PureComponent, createRef } from 'react'// 创建一个类组件, 作为子组件测试class Test extends PureComponent {test() {console.log("Test");}render() {return <h2>Test</h2>}}export class App extends PureComponent {constructor() {super()this.tsetRef = createRef()}getDom() {// 获取组件实例console.log(this.tsetRef.current)// 可以调用组件的实例方法this.tsetRef.current.test()}render() {return (<div><Test ref={this.tsetRef}/></div>)}}export default App
函数式组件是没有实例的,所以无法通过ref获取他们的实例:
但是某些时候,我们可能想要获取函数式组件中的某个DOM元素;
这个时候我们可以通过
React.forwardRef
来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref,后面我们也会学习 hooks 中如何使用ref;
import { render } from '@testing-library/react';import React, { PureComponent, createRef, forwardRef} from 'react'}// 创建一个函数组件, 作为子组件测试// 使用forwardRef将函数包裹起来const Foo = forwardRef(function(props, ref) {return (<h2 ref={ref}>Foo</h2>)})export class App extends PureComponent {constructor() {super()// 提前创建一个ref对象this.fooRef = createRef()}getDom() {// 获取函数组件中元素的DOMconsole.log(this.fooRef.current)}render() {return (<div><Foo ref={this.fooRef}/></div>)}}export default App