1. 程式人生 > >react 之 ref

react 之 ref

掛載 tin 回調 strong div closure return ren cti

react提供一個refs的安全口,做到‘接觸’或調用 從render()返回的組件實例的方法、DOM節點。

用法:1. ref Callback屬性
   ref 屬性可以是一個回調函數,此函數會在這個組件被掛載後立即執行,此回調函數的參數就是當前這個組件或DOM節點回調函數體內可以立即使用這個組件,或保存供以後使用;

 1 render(){
 2 return(
 3     <Textinput  ref={(c)=>{
 4         if(c != null)c.focus();          // 立即使用
 5     }}/>)
 6 };
 7 ==================
 8
render(){ 9 return(<input ref={(c)=>this._c = c}/>) //保存 10 } 11 componentDidMount(){ 12 this._c.focus(); //調用 13 }

  註:當被引用的組件卸載和每當ref變動,舊的ref將會被以null做參數調用。這阻止了在實例被保存的情況下的內存泄露。

用法2:ref String屬性

  ref 同樣支持使用字符串的形式作為一個組件的ref prop:

  <input ref="myInput"/> 訪問用 this.refs.myInput.value 或 this.refs[‘myInput‘](此方法為保留Google Closure Compiler advanced-mode crushing resilience)。

註:1.決不再組件的render()方法中訪問refs。

  2.refs不能連接到一個stateless fuanction,因為無狀態組件不支持組件實例,沒有生命周期。

react 之 ref