react 之 ref
阿新 • • 發佈:2017-08-06
掛載 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 ================== 8render(){ 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