Refs to Components

一.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元素。