一. refs的使用
在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:
- 管理焦点,文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
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 = "你好,react";
this.titleRef.current.innerHTML = "你好,react";
this.titleEl.innerHTML = "你好,react";
}
}
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(