React 中需要操作元素時，可通過 findDOMNode() 或通過 createRef() 創建對元素的引用來實現。前者官方不推薦，所以這里討論后者及其與 TypeScript 結合時如何工作。

React 中的元素引用

正常的組件中，可通過創建對元素的引用來獲取到某元素然后進行相應操作。比如元素加載后將焦點定位到輸入框。

創建對元素的引用是通過 React.createRef() 方法完成的。使用的時候，通過其返回對象身上的 current 屬性可訪問到綁定引用的元素。

React 內部對引用的 current 賦值更新發生在 componentDidMount 或 componentDidUpdate 生命周期之前，即存在使用的時候引用未初始化完成的情況，所以 current 不一定有值。好的做法是使用前先判空。

在上面的示例中，之所以不用判空是因為我們在 componentDidMount 生命周期中使用，此時元素已經加載到頁面，所以可以放心使用。

組件中引用的傳遞

對于原生 DOM 元素可以像上面那樣創建引用，但對于自己寫的組件，則需要使用 forwardRef() 來實現。

假如你寫了個按鈕組件，想要實現像上面那樣，讓使用者可通過傳遞一個 ref 屬性來獲取到組件中原生的這個 <button> 元素以進行相應的操作。

button.jsx

添加 ref 支持后的按鈕組件：

button.jsx

forwardRef 接收一個函數，函數的入參中第一個是組件的 props，第二個便是外部傳遞進來的 ref 引用。通過將這個引用在組件中綁定到相應的原生 DOM 元素上，實現了外部直接引用到組件內部元素的目的，所以叫 forwardRef（傳遞引用）。

使用上面創建的 FancyInput，在組件加載后使其獲得焦點：

TypeScript 中傳遞引用

先看正常情況下，對原生 DOM 元素的引用。還是上面的示例：

像上面那樣創建并使用存在兩個問題。

一個是提示我們的引用無法賦值到 <input> 的 ref 屬性上，類型不兼容。引用需要與它真實所指代的元素類型相符，這正是 TypeScript 類型檢查為我們添加的約束。這個約束的好處是，我們在使用引用的時候，就知道這個引用真實的元素類型，TypeScript 會自動提示可用的方法和屬性，同時防止調用該元素身上沒有的屬性和方法。這里修正的方法很簡單，如果 hover 或 F12 查看 React.createRef() 的方法簽名，會發現它是個泛型方法，支持傳遞類型參數。

所以上面創建引用時，顯式指定它的類型。

第二個問題是即使在 componentDidMount 生命周期中使用，TypeScript 仍然提示 current 的值有可能為空。上面討論過，其實此時我們知道它不可能為空的。但因為 TypeScript 無法理解 componentDidMount，所以它不知道此時引用其實是可以安全使用的。解決辦法當然是加上判空的邏輯。

還可通過變量后添加 ! 操作符告訴 TypeScript 該變量此時非空。

修復后完整的代碼如下：

React + TypeScript 組件引用的傳遞

繼續到組件的情況，當需要引用的元素在另一個組件內部時，還是通過 React.forwardRef()。

這是該方法的簽名：

可以看到，方法接收兩個類型參數，T 為需要引用的元素類型，我們示例中是 HTMLInputElement，P 為組件的 props 類型。

所以添加引用傳遞后，FancyInput 組件在 TypeScript 中的版本應該長這樣：

使用組件：

相關資源

• Refs and the DOM
• Forwarding Refs
• findDOMNode()
• React Refs with TypeScript