React-ref属性使用

React-ref属性使用_第1张图片
React

React为我们提供的这个ref属性,可以打破React对虚拟DOM 的限制;
对元素真正实例的引用,也就是渲染视图之后,返回是具体的dom节点;
可以挂载到组件上也可以是dom元素上
无状态组件,函数组件,没有对实例进行继承,所以不能绑定ref属性
最后好用东西坑多,不要过度依赖

  • string 使用方法

three

handleTest(){ console.log(this.refs.testNodo) }
  • 新版本的React不推荐我们使用ref string绑定,推荐使用ref callback
 this.input=input}/>
{
        // console.log(input)
        // 当组件挂载后,回调函数就会被调用
        // 回调函数自动接收当前的DOM元素作为参数,传入
        return this.input=input;
}}/>
//获取当前元素
  • 组件中使用ref绑定
this.One=One}/>
test(){
    console.log(this.One)
    //可以直接获取组件实例,相当于拿到了this 并且可以获取One组件的属性方法,元素
}

你可能感兴趣的:(React-ref属性使用)