本文例項講述了React中Ref 的使用方法。分享給大家供大家參考，具體如下：

React中Ref 的使用 React v16.6.3

在典型的React資料流中，props是父元件與其子元件互動的唯一方式。要修改子項，請使用new props 重新呈現它。但是，在某些情況下，需要在典型資料流之外強制修改子項。要修改的子項可以是React元件的例項，也可以是DOM元素。對於這兩種情況，React都提供了api。

何時使用refs

refs有一些很好的用例：

• 1.文字選擇或媒體播放。
• 2.觸發勢在必行的動畫。
• 3.與第三方DOM庫整合。

避免將refs用於可以宣告性地完成的任何操作。

*不要過度使用Refs

舊版API：字串引用

如果您之前使用過React，那麼您可能熟悉一箇舊的API，其中ref屬性是一個字串"textInput"，並且DOM節點被訪問為this.refs.textInput。建議不要使用它，因為字串引用有一些問題，被認為是遺留問題，很可能會在未來的某個版本中刪除。

回撥引用

當元件安裝時，React將使用DOM元素呼叫ref回撥，並在解除安裝時呼叫null。

在componentDidMount或componentDidUpdate觸發之前，Refs保證是最新的.

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);

 this.textInput = null;

 this.setTextInputRef = element => {
  this.textInput = element;
 };

 this.focusTextInput = () => {
  // Focus the text input using the raw DOM API
  if (this.textInput) this.textInput.focus();
 };
 }

 componentDidMount() {
 // autofocus the input on mount
 this.focusTextInput();
 }

 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={this.setTextInputRef}
  />
  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

refs例子--點選獲取input焦點

class Example extends React.Component {
 handleClick() {
 // 使用原生的 DOM API 獲取焦點
 this.refs.myInput.focus
 ();
 }
 render() {
 // 當元件插入到 DOM 後，ref 屬性新增一個元件的引用於到 this.refs
 return (
  <div>
  <input type="text" ref="myInput" />
  <input
   type="button"
   value="點我輸入框獲取焦點"
   onClick={this.handleClick.bind(this)}
  />
  </div>
 );
 }
}

使用React.createRef()

React.createRef()React 16.3中引入的API。如果您使用的是早期版本的React，我們建議您使用回撥引用。

建立React.createRef()

Refs是使用屬性建立的，React.createRef()並通過ref屬性附加到React元素。在構造元件時，通常將Refs分配給例項屬性，以便可以在整個元件中引用它們。

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = React.createRef();
 }
 render() {
 return <div ref={this.myRef} />;
 }
}

訪問ref

當ref被傳遞給元素時render，對該節點的引用變得可以在currentref 的屬性處訪問

const node = this.myRef.current;

ref的值根據節點的型別而有所不同

• 當在refHTML元素上使用該屬性時，ref在建構函式中建立的屬性將React.createRef()接收底層DOM元素作為其current屬性。
• 在ref自定義類元件上使用該屬性時，該ref物件將接收元件的已安裝例項作為其current。

您可能無法ref在函式元件上使用該屬性，因為它們沒有例項。

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);
 // create a ref to store the textInput DOM element
 this.textInput = React.createRef();
 this.focusTextInput = this.focusTextInput.bind(this);
 }

 focusTextInput() {
 // Explicitly focus the text input using the raw DOM API
 // Note: we're accessing "current" to get the DOM node
 this.textInput.current.focus();
 }

 render() {
 // tell React that we want to associate the <input> ref
 // with the `textInput` that we created in the constructor
 return (
  <div>
  <input
   type="text"
   ref={this.textInput} />

  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

current當元件安裝時，React將為該屬性分配DOM元素，並null在解除安裝時將其分配回。ref更新發生之前componentDidMount或componentDidUpdate生命週期方法。

無法在函式元件上使用ref屬性

function MyFunctionComponent() {
 return <input />;
}

class Parent extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }
 render() {
 // This will *not* work!
 return (
  <MyFunctionComponent ref={this.textInput} />
 );
 }
}

**如果需要引用它，則應該將元件轉換為類，就像您需要生命週期方法或狀態時一樣。
但是，只要引用DOM元素或類元件，就可以在函式元件中使用該ref屬性：**

function CustomTextInput(props) {
 // textInput must be declared here so the ref can refer to it
 let textInput = React.createRef();

 function handleClick() {
 textInput.current.focus();
 }

 return (
 <div>
  <input
  type="text"
  ref={textInput} />

  <input
  type="button"
  value="Focus the text input"
  onClick={handleClick}
  />
 </div>
 );
}

將DOM引用公開給父元件

在極少數情況下，可能希望從父元件訪問子節點的DOM節點。通常不建議這樣做，因為它會破壞元件封裝，但它偶爾可用於觸發焦點或測量子DOM節點的大小或位置。

雖然可以向子元件新增引用，但這不是一個理想的解決方案，因為只能獲得元件例項而不是DOM節點。此外，這不適用於功能元件。

如果使用React 16.3或更高版本，我們建議在這些情況下使用ref forwarding。引用轉發允許元件選擇將任何子元件的引用公開為自己的元件。可以在ref轉發文件中找到有關如何將子DOM節點公開給父元件的詳細示例。

如果您使用React 16.2或更低版本，或者您需要比ref轉發提供的更多靈活性，您可以使用此替代方法並明確地將ref作為不同名稱的prop傳遞。

如果可能，建議不要暴露DOM節點，但它可以是一個有用的逃生艙。請注意，此方法要求向子元件新增一些程式碼。如果您完全無法控制子元件實現，則最後一個選項是使用findDOMNode()，但不鼓勵使用它StrictMode。

希望本文所述對大家react程式設計有所幫助。