本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)
一. refs 的使用
在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:
- 管理焦点,文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
1.1. 创建 ref 的方式
如何创建refs
来获取对应的DOM呢?目前有三种方式:
- 方式一:传入字符串
- 使用时通过
this.refs.传入的字符串
格式获取对应的元素;
- 使用时通过
- 方式二:传入一个对象
- 对象是通过
React.createRef()
方式创建出来的; - 使用时获取到创建的对象其中有一个
current
属性就是对应的元素;
- 对象是通过
- 方式三:传入一个函数
- 该函数会在DOM被挂载时进行回调,这个函数会传入一个 元素对象,我们可以自己保存;
- 使用时,直接拿到之前保存的元素对象即可;
代码演练:
import React, {
PureComponent, createRef } from 'react'
export default class App extends PureComponent {
constructor(props) {
super(props);
this.titleRef = createRef();
this.titleEl = null;
}
render() {
return (
<div>
<h2 ref="title">String Ref</h2>
<h2 ref={
this.titleRef}>Hello Create Ref</h2>
<h2 ref={
element => this.titleEl = element}>Callback Ref</h2>
<button onClick={
e => this.changeText()}>改变文本</button>
</div>
)
}
changeText() {
this.refs.title.innerHTML = "你好啊,李银河";
this.titleRef.current.innerHTML = "你好啊,李银河";
this.titleEl.innerHTML = "你好啊,李银河";
}
}
1.2. ref 节点的类型
ref
的值根据节点的类型而有所不同:
- 当
ref
属性用于 HTML 元素时,构造函数中使用React.createRef()
创建的ref
接收底层 DOM 元素作为其current
属性; - 当
ref
属性用于自定义class
组件时,ref
对象接收组件的挂载实例作为其current
属性; - 你不能在函数组件上使用
ref
属性,因为他们没有实例;
这里我们演示一下ref
引用一个class
组件对象:
import React, {
PureComponent, createRef } from 'react';
class Counter extends PureComponent {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
render() {
return (
<div>
<h2>当前计数: {
this.state.counter}</h2>
<button onClick={
e => this.increment()}>+1</button>
</div>
)
}
increment() {
this.setState({
counter: this.state.counter + 1
})
}
}
export default class App extends PureComponent {
constructor(props) {
super(props);
this.counterRef = createRef();
}
render() {
return (
<div>
<Counter ref={
this.counterRef}/>
<button onClick={
e => this.