勵志

勵志人生知識庫

react ref用法

在React中,ref是一個用於訪問DOM節點或組件實例的特殊屬性。React ref的主要用法有三種,包括回調函式形式、字元串形式和React.createRef()形式。具體如下:

回調函式形式。這是官方推薦的方式,回調函式會在組件掛載或卸載時被調用,並接收對組件實例或DOM節點的引用作為參數。例如,在類組件中,可以在構造函式中定義一個ref,然後在組件掛載後通過這個ref訪問DOM節點或組件實例。在現代的函式組件中,可以使用useRef Hook來達到類似的效果。

字元串形式。這是一種較舊的方式,已經在新的React版本中被棄用。使用字元串形式的ref,可以通過this.refs.[refName]來訪問真實的DOM節點或組件實例。

React.createRef()形式。React.createRef()返回一個對象,其current屬性指向實際的DOM節點或組件實例。這種方式適用於類組件。

總的來說,ref在React中主要用於獲取對DOM節點或組件實例的直接引用,以便進行焦點控制、內容選擇、媒體播放等操作。需要注意的是,直接操作DOM應謹慎進行,以避免引起不必要的副作用。