一.ref是通过ReactDOM.render返回的

  定义在组件上的render方法返回的是一个虚拟的DOM节点,jsx返回的是一个ReactElement,ReactDOM.render返回的是一个组件实例的引用

var myComponentElement = <MyComponent />; // This is just a ReactElement.

// Some code here...

var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);
myComponentInstance.doSomething();

二.ref的类型

ref有两种类型的值分别是:字符串和函数。组件的ref只有组件被装载之后才能访问得到。

1.ref属性值是一个字符串

  (1)给一个DOM组件(如:div,input等)设置一个ref属性,通过this.refs.refName获取到的是一个实际的DOM节点

var TextInput = React.createClass({
render:function(){
return <input type='text' className='text' ref='input'/>;
},
componentDidMount:function(){
console.log(this.refs.input.type);//text
}
});

  (2)给一个复合组件设置一个ref属性,通过this.refs.refNamde获取到的是一个组件实例的引用,因此可以调用这个组件实例上的方法

var TextInput = React.createClass({
render:function(){
return <input type='text' className='text'/>;
}
check:function(){
console.log('我是组件中的方法');
}
});
var DivBox = React.createClass({
render:function(){
return <TextInput ref='TextInputClass'/>;
},
componentDidMount:function(){
this.refs.TextInputClass.check();//我是组件中的方法
}
});

2.ref的值是一个函数

  (1)给一个DOM组件设置一个ref属性。这个回调函数在组件mounted之后立即调用,可以给这个回调函数传递一个参数,该参数指这个DOM节点

var Div = React.createClass({
render:function(){
return <div ref={function(curDivNode){
console.log(curDivNode.firstChild.nodeValue);//kfjdk
}
}>
kfjdk
</div>
}
});

(2)给一个复合组件设置一个ref属性,这个回调函数在组件mounted之后立即调用,可以给这个回调函数传递一个参数,这个参数指这个组件实例的引用,因此可以调用这个实例上的方法。

var Div = React.createClass({
render:function(){
return <div ref={function(curDivNode){console.log(curDivNode);}}>
kfjdk
</div>
},
check:function(){
console.log('我是组件方法')
}
});
var OutDiv = React.createClass({
render:function(){
return <Div ref={function(outDivNode){
outDivNode.check();//我是组件上的方法
}}/>
} });

补充:(1)不要将ref设置到用函数类型声明的组件上,在函数类型声明的组件上,通过this.refs.refName得到的是一个null,但是你可以在函数类型组件内部的DOM组件或者class类型组件上设置ref

(2)建议使用函数类型ref代替字符串类型ref

var Liu = React.createClass({
render:function(){
return <StateLess ref='stateless'/>
},
componentDidMount:function(){
console.log(this.refs.stateless);//null
}
});
function StateLess(){
return <p>StateLess</p>
}

  (2)在render函数内部不要访问ref

  (3)ref自动管理。如果孩子被摧毁,它的ref也被摧毁,不用担心内存

  (4)ref可以被设置在任何组件上

3.将子组件中的dom元素暴露到父组件中

在一些情况中,需要将子组件中的元素节点暴露到父组件中(这并不推荐),但是当在父组件中需要让子组件中的元素取得焦点,或者管理子组件中元素的位置或大小
时这很有用。我们可以给子组件设置ref,但是这并不是理想的解决方案,因为这仅仅得到了一个组件实例而不是DOM节点。代替的方案是:给子组件设置一个函数类型
的prop,然后在子组件中将这个函数类型的prop设置到元素节点ref上。如下:
class ParentCom extends React.Component{
   render(){
      return <ChildrenCom propFunc={elem => this.input = elem}/>
   }
}
function ChildrenCom(props){
   return <input ref={props.propFunc}/>
}

当ref回调是一个行内函数,这个函数在组件更新期间会调用两次,第一次调用时的参数时null,第二次调用时参数时DOM元素。

Refs to Components的更多相关文章

  1. Refs & DOM

    Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方式. 在典型的 React 数据流中, 属性(props)是父组件与子代交互的唯一方式.要修改子组件,你需要 ...

  2. 用vue2.x注册一个全局的弹窗alert组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  3. vue 前端框架 (三)

    VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

  5. 用vue2.x注册一个全局的弹窗alert组件、confirm组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  6. Vue基础操作

    一.Vue入门基础知识 1.Vue使用的基本操作 i. 先下载,引入vue.jsii. Vue,实例化一个vue实例化对象(new Vue({})) 1. 新建一个vue实例化对象(Vue是一个构造函 ...

  7. [React Fundamentals] Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual ...

  8. [React] React Fundamentals: Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual ...

  9. 24-React Components组件

    Components 组件 1.组件 可以让UI独立的分割出来,可以让UI重复利用. 2.组件就像是JavaScript函数,它们能够接收任意的输入(称为"props",即属性)并 ...

随机推荐

  1. SPOJ #440. The Turtle´s Shortest Path

    Coding a Dijkstra is not hard. %70 of my time spent on tackling TLE, as my last post. Dijkstra works ...

  2. mongodb基本语句使用

    mongodb学习:##mongodb基础##数据库常用命令##用户相关##修改.添加.删除集合数据##条件操作符##创建表 ------------------------------------- ...

  3. 剑指offer系列55---最小的k个数

    [题目] 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. *[思路]排序,去除k后的数. package com.exe11 ...

  4. thinkphp 常用

     {$Think.session.adminuser}  获取session信息,模版和js中都可以调用 模版调用 <empty name="Think.session.userid& ...

  5. Linux中升级更新命令yum upgrade和yum update的区别

    区别 Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的: 代码如下: yum -y update #升级所有包,同时也升级软件和系统内核 yum - ...

  6. BOOST的AUTO link机制以及配置

    我们在使用BOOST的时候,如果需要链接一些库,是不用我们手动去链接的,归根结底还是boost的auto_link这个机制,在boost下的auto_link.hpp这个文件夹里面,基本可以看出要根据 ...

  7. Authentication token manipulation error for ubuntu ubuntu-16.04.1-desktop-amd64

    https://ubuntuforums.org/showthread.php?t=1772894 Hi, I faced the same problem when I tried to recov ...

  8. (转)HelloWorld CMake CMake中构建静态库与动态库及其使用

    继续完善Hello World,建立它的共享库, 包括静态库和动态库. 本节的任务: 1,建立一个静态库和动态库,提供HelloFunc函数供其他程序编程使用,HelloFunc 向终端输出Hello ...

  9. CF 501C Misha and Forest 好题

    C. Misha and Forest   Let's define a forest as a non-directed acyclic graph (also without loops and ...

  10. Nginx_修改Web服务器头信息(Header)里的Server值[转]

    http://blog.rekfan.com/?p=122 黑客攻击一个网站,往往需要了解服务器的架构,网站的架构等信息,了解了这些信息,就知道网站薄弱的地方在哪里了!    为了不让对方知道自己的w ...