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组件的属性方法,元素
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React Refs React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何...
    Android_冯星阅读 14,378评论 1 4
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,292评论 2 21
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,310评论 0 2
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,052评论 0 1
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,487评论 1 10