ref的值根据节点类型而有所不同:
- 当ref属性用于HTML元素时,构造函数中使用React.createRed()创建的ref接收底层DOM元素作为current属性
- 当ref属性用于自定义class组件时,ref对象接收组件的挂载实例作为其current属性
- 不能在函数组件上使用ref属性,因为他们没有实例
函数式组件没有实例,无法通过ref获取他们的实例:
但是某些时候想要获取函数式组件中的某个DOM元素,可以通过React.forwardRef
import React, { PureComponent, createRef } from 'react';
class Counter extends PureComponent {
constructor (props) {
super(props);
this.state = {
counter: 0
}
}
render () {
const { counter } = this.state
return (
<div>
<h2>当前计数:{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.titleRef2 = createRef()
this.titleFun = null
this.counterRef = createRef()
}
render () {
return (
<div>
{/*ref=字符串/对象/函数*/}
<h2 ref='titleRef'>字符串</h2>
{/*目前react推荐的方式*/}
<h2 ref={this.titleRef2}>对象</h2>
<h2 ref={ac => { this.titleFun = ac }}>函数</h2>
<button onClick={e => this.changeDom()}>改变DOM</button>
<hr/>
<Counter ref={this.counterRef}/>
<button onClick={e => this.appChange()}>App</button>
</div>
);
}
changeDom () {
// 1、使用方式一:字符串(不推荐,后续的更新可能会删除)
this.refs.titleRef.innerHTML = '字符串2'
// 2、使用方式二:对象方式
this.titleRef2.current.innerHTML = '对象2'
// 3、使用方式三:回调函数
this.titleFun.innerHTML = '函数2'
}
appChange () {
console.log(this.counterRef, this.counterRef.current)
this.counterRef.current.increment()
}
}