React Ref 是 React 提供的一種方式，允許我們訪問 DOM 節(jié)點或者在 render 方法中創(chuàng)建的 React 元素，通常情況下，我們會避免直接操作 DOM，而選擇使用 React 提供的狀態(tài)（state）和屬性（props）來更新視圖，有些情況下，我們需要直接操作 DOM，這時候就需要使用 Refs。

在 TypeScript 中，我們可以使用 React.RefObject 類型來聲明一個 Ref，這個類型表示一個可以附加到任何可渲染對象的引用，例如一個 DOM 元素或者一個類組件實例，下面是一個簡單的例子：

import React, { useRef } from 'react';
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // current 屬性會被初始化為存儲在 useRef 中的值
    inputEl.current?.focus();
  };
  return (
    <>
      
      聚焦輸入框
    
  );
}

在這個例子中，我們使用 useRef 創(chuàng)建了一個 Ref，并將其存儲在 inputEl 變量中，我們將這個 Ref 附加到 元素上，當(dāng)用戶點擊按鈕時，我們可以通過 inputEl.current 訪問到這個元素，并調(diào)用 focus 方法使其獲得焦點，需要注意的是，我們需要使用可選鏈操作符（?.）來確保 current 屬性存在，這是因為在某些情況下，例如組件卸載時，useRef 存儲的值可能會被清除。

除了 useRef，我們還可以使用 createRef API 來創(chuàng)建一個 Ref，下面是一個例子：

import React, { useRef, createRef } from 'react';
function TextInputWithFocusButton() {
  const inputEl = createRef();
  const onButtonClick = () => {
    inputEl.current?.focus();
  };
  return (
    <>
      
      聚焦輸入框
    
  );
}

在這個例子中，我們使用 createRef 創(chuàng)建了一個 Ref，并將其存儲在 inputEl 變量中，我們將這個 Ref 附加到 元素上，當(dāng)用戶點擊按鈕時，我們可以通過 inputEl.current 訪問到這個元素，并調(diào)用 focus 方法使其獲得焦點，同樣需要注意的是，我們需要使用可選鏈操作符來確保 current 屬性存在。

我們可能需要在多個組件之間共享一個 Ref，為了實現(xiàn)這一點，我們可以將 Ref 作為 prop 傳遞給子組件，下面是一個例子：

import React, { useRef, forwardRef } from 'react';
const FancyTextInput = forwardRef((props, ref) => {
  return ;
});
function App() {
  const inputEl = useRef(null);
  const handleButtonClick = () => {
    inputEl.current?.focus();
  };
  return (
    

      
      聚焦輸入框
    
  );
}

在這個例子中，我們使用 forwardRef API 創(chuàng)建了一個名為 FancyTextInput 的自定義組件，這個組件接受一個名為 ref 的 prop，并將其附加到內(nèi)部的 元素上，我們在 App 組件中使用這個自定義組件，并將一個 Ref 作為 prop 傳遞給它，當(dāng)用戶點擊按鈕時，我們可以通過 inputEl.current 訪問到這個元素，并調(diào)用 focus 方法使其獲得焦點，需要注意的是，由于我們使用了 forwardRef，所以我們不需要使用可選鏈操作符來確保 current 屬性存在。

網(wǎng)頁題目：ReactRefTypeScript用法
文章起源：http://uogjgqi.cn/article/djecdpp.html