React-ref属性使用

React

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组件的属性方法,元素
}