首页 > 代码库 > Refs to Components
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设置到一个无状态函数上，如果将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可以被设置在任何组件上
Refs to Components
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。