refs綁定在this上和公開DOM refs父組件

refs

class CustomTextInput extends React.Component { constructor(props) { super(props); this.focus = this.focus.bind(this); } focus() { // Explicitly focus the text input using the raw DOM API this.textInput.focus(); } render() { // Use the `ref` callback to store a reference to the text input DOM // element in an instance field (for example, this.textInput). return ( <div> <input type="text" ref={(input) => { this.textInput = input; }} /> <input type="button" value="Focus the text input" onClick={this.focus} /> </div> ); } }

組件掛載或卸載時，會觸發ref回調。例ref={(input) => { this.textInput = input; }}，掛載時，this.textInput等於當前input；當卸載時，等於null

公開DOM refs父組件

在極少數狀況下，您可能但願從父組件訪問子節點的DOM節點。一般不建議這樣作，由於它會破壞組件封裝，但偶爾也能夠用於觸發焦點或測量子DOM節點的大小或位置。

雖然能夠向子組件添加引用，但這不是一個理想的解決方案，由於您只能獲取組件實例而不是DOM節點。此外，這對功能組件無效。

相反，在這種狀況下，咱們建議在小孩身上露出特殊的支撐。孩子將使用任意名稱（例如inputRef）使用函數prop ，並將其做爲ref屬性附加到DOM節點。這容許父代經過中間的組件將其ref回調傳遞給孩子的DOM節點。

這適用於類和功能組件。

function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> ); } class Parent extends React.Component { render() { return ( <CustomTextInput inputRef={el => this.inputElement = el} /> ); }

在上面的例子中，Parent將它的ref回調做爲一個inputRef支持傳遞給CustomTextInput，並將與該CustomTextInput特殊ref屬性相同的函數傳遞給<input>。其結果是，this.inputElement在Parent將被設置爲對應於所述DOM節點<input>中的元素CustomTextInput。

即便CustomTextInput是功能組件也是如此。與只能爲DOM元素和類組件指定的特殊ref屬性不一樣，常規組件道具沒有限制。inputRef

這種模式的另外一個好處就是它的做用很大。例如，想象Parent不須要DOM節點，可是渲染的組件Parent（讓咱們稱之爲Grandparent）須要訪問它。而後咱們可讓它Grandparent指定inputRef道具Parent，並將Parent其轉發到CustomTextInput：

function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> ); } function Parent(props) { return ( <div> My input: <CustomTextInput inputRef={props.inputRef} /> </div> ); } class Grandparent extends React.Component { render() { return ( <Parent inputRef={el => this.inputElement = el} /> ); } }

這裏，ref回調首先被指定Grandparent。它被傳遞到Parent做爲一個常規的支柱被稱爲inputRef，Parent並將它傳遞到CustomTextInput一個支柱。最後，CustomTextInput讀取inputRefprop並將傳遞的函數做爲ref屬性附加到<input>。其結果是，this.inputElement在Grandparent將被設置爲對應於所述DOM節點<input>中的元素CustomTextInput。

全部考慮的事情，咱們建議儘量不暴露DOM節點，但這能夠是一個有用的泄露開口。請注意，此方法要求您向子組件添加一些代碼。若是您徹底沒法控制子組件實現，則最後一個選項是使用findDOMNode()，但不鼓勵。