初識React(4)：ref屬性

curried 發布于2019-08-23 11:28 / 880人閱讀

摘要：屬性其實就是為了獲取節點，例如屬性利用屬性返回的回調函數獲取節點，從而讓頁面渲染完成之后，聚焦，除了可以綁定回調函數之外還能綁定字符串，但是在后期對字符串形式不再維護，這里就不具體說明了，就用回調函數獲取。

ref屬性其實就是為了獲取DOM節點，例如：

import React from "react"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
  }
   render() {
     return (
       
          ref屬性
           this.inputNode = node}/>
       
     )
   }
}

export default RefComponent;

利用ref屬性返回的回調函數獲取DOM節點，從而讓頁面渲染完成之后，input聚焦，ref除了可以綁定回調函數之外還能綁定字符串，但是在后期react對字符串形式不再維護，這里就不具體說明了，就用回調函數獲取DOM。

除了給input聚焦之外，還可以獲取當前DOM節點的內容，如下：

import React from "react"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
  }
   render() {
     return (
       
          ref屬性
           this.inputNode = node}/>
           this.texthtml = node}>你好
       
     )
   }
}

export default RefComponent;

輸出結果為：

你好
你好

在這里，我們也發現一個問題，ref雖然獲取DOM節點很方便，但是如果ref用的多了，后期就不好維護了，所以，盡量能少用即少用。

ref除了可以給HTML標簽添加，也可以給組件添加，例如：

import React from "react"
import Button from "./button.js"

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
     console.log(this.buttonNode);
  }
   render() {
     return (
       
          ref屬性
           this.inputNode = node}/>
           this.texthtml = node}>你好
          
     )
   }
}

export default RefComponent;

但是此時，this.buttonNode得到的是一個Button這個組件實例DOM

這里要注意一個問題，ref只能用在類定義的組件，不能用在函數組件，因為函數組件沒有實例，比如以下寫法就是錯誤的：

import React from "react"

function TestComponent() {
   return (
    函數組件
   );
}

class RefComponent extends React.Component {
  componentDidMount(){
     console.log(this.testCom);
  }
   render() {
     return (
       
          函數組件
           this.testCom = node}/>
       
     )
   }
}

export default RefComponent;

如果這樣寫，則會報錯，并且this.testCom為undefined，因為此時是獲取不到函數組件的實例的，所以以上寫法要注意

總結： ref可以給HTML標簽，類組件添加，但是不能給函數組件添加

GPU云服務器云服務器 react-router4 docker初識 ref Refs

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97014.html

React系列---React（二）組件的prop和state

摘要：給賦值也是構造函數的工作之一。在的構造函數中，還給兩個成員函數綁定了當前的執行環境，因為方式創建的組件并不自動給我們綁定到當前實例對象。我們可以利用的功能，避免判斷邏輯這種充斥在構造函數之中，讓代碼更優。 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期組件是React...

Labradors 2019-08-20 17:33 評論0 收藏0
[源碼閱讀]通過react-infinite-scroller理解滾動加載要點

摘要：看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動加載要注意的東西。通過判斷不為的情況，確保滾動組件正常顯示和在無滾動的情況下，和相等，都為在有滾動的情況下，表示實際內容高度，表示視口高度。 react-infinite-scroller就是一個組件，主要邏輯就是addEventListener綁定scroll事件。看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動加...

cikenerd 2019-08-23 13:41 評論0 收藏0
react開發教程（－）初識

摘要：定義一個組件可以在其他組件中調用這個組件調用組件劉宇組件插入內容在上面的案例中可以看到吧寫到當中，這種寫法稱為。 React初識 React是Facebook推出的一個javascript庫(用來創建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。組件 React的一切都是基于組件的。web世界的構成是基于各種HTML標簽的...

Allen 2019-08-21 15:36 評論0 收藏0
初識redux

摘要：主要用于構建，很多人認為是中的視圖。函數接受另一個函數作為參數，返回新生成的對象的變化，會導致的變化。用戶無法直接改變只能觸發上綁定的事件。表示應該要發生變化了。允許使用方法設置監聽函數，一旦發生變化，就自動執行這個函數。什么是react React 是一個用于構建用戶界面的 JAVASCRIPT 庫。React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。...

xumenger 2019-08-22 16:13 評論0 收藏0