React为我们提供的这个ref属性,可以打破React对虚拟DOM 的限制;
对元素真正实例的引用,也就是渲染视图之后,返回是具体的dom节点;
可以挂载到组件上也可以是dom元素上
无状态组件,函数组件,没有对实例进行继承,所以不能绑定ref属性
最后好用东西坑多,不要过度依赖
- string 使用方法
<h1 ref="testNodo">three</h1>
handleTest(){
console.log(this.refs.testNodo)
}
- 新版本的React不推荐我们使用ref string绑定,推荐使用ref callback
<input type="text" ref={input=> this.input=input}/>
<input type="text" ref={(input)=>{
// console.log(input)
// 当组件挂载后,回调函数就会被调用
// 回调函数自动接收当前的DOM元素作为参数,传入
return this.input=input;
}}/>
//获取当前元素
- 组件中使用ref绑定
<One ref={One=>this.One=One}/>
test(){
console.log(this.One)
//可以直接获取组件实例,相当于拿到了this 并且可以获取One组件的属性方法,元素
}