Refs to Components

Posted 2020-08-09 QxQstar

一.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设置到一个无状态函数上，如果将ref附加在一个无状态函数中，通过this.refs.refName得到的是一个null

 

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可以被设置在任何组件上