在react中支持一种ref属性，叫标记属性，通过ref属性把DOM节点或者组件挂载到实例上，过后可以通过this来访问标记好的元素。
使用ref需要注意几点
- ref可以挂载到class组件上
- 不能够在函数式组件上使用ref标记，因为他们没有实例
- 如果标记在DOM节点上，后面通过this访问就代表访问该DOM元素
通过React.createRef()方法标记（推荐使用）
import React, { Component,createRef } from 'react'
export default class ref extends Component {
constructor(){
super();
this.p = createRef() //创建ref标记
}
componentDidMount(){
console.log(this.p.current) //
}
render() {
return (
<div>
<p ref={this.p}>我被ref标记</p>
</div>
)
}
}
通过箭头函数进行标记
import React, { Component } from 'react'
export default class ref extends Component {
componentDidMount(){
console.log(this.span)
}
render() {
return (
<div>
<span ref={el=>this.span=el}>我被ref标记箭头函数</span>
</div>
)
}
}
面试官
- 在react中，ref属性有什么作用？
我们一般通过ref属性来对DOM元素进行一个标记，通过标记把DOM元素绑定在实例当中。在表单元素中，我们可以通过对表单元素进行ref标记来获取DOM节点，这时候我们就可以对表单元素的value值进行更改操作了。
