你的位置:首页 > Java教程

[Java教程]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可以被设置在任何组件上