建站
咨詢
售后
建站咨詢
新聞中心
React Ref 是 React 提供的一種方式，允許我們?cè)L問(wèn) DOM 節(jié)點(diǎn)或者在 render 方法中創(chuàng)建的 React 元素，通常情況下，我們會(huì)避免直接操作 DOM，而選擇使用 React 提供的狀態(tài)（state）和屬性（props）來(lái)更新視圖，有些情況下，我們需要直接操作 DOM，這時(shí)候就需要使用 Refs。
在 TypeScript 中，我們可以使用 React.RefObject
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// current 屬性會(huì)被初始化為存儲(chǔ)在 useRef 中的值
inputEl.current?.focus();
};
return (
<>
);
}
在這個(gè)例子中，我們使用 useRef 創(chuàng)建了一個(gè) Ref，并將其存儲(chǔ)在 inputEl 變量中，我們將這個(gè) Ref 附加到 元素上，當(dāng)用戶點(diǎn)擊按鈕時(shí)，我們可以通過(guò) inputEl.current 訪問(wèn)到這個(gè)元素，并調(diào)用 focus 方法使其獲得焦點(diǎn)，需要注意的是，我們需要使用可選鏈操作符（?.）來(lái)確保 current 屬性存在，這是因?yàn)樵谀承┣闆r下，例如組件卸載時(shí)，useRef 存儲(chǔ)的值可能會(huì)被清除。
除了 useRef，我們還可以使用 createRef API 來(lái)創(chuàng)建一個(gè) Ref，下面是一個(gè)例子：
import React, { useRef, createRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = createRef();
const onButtonClick = () => {
inputEl.current?.focus();
};
return (
<>
);
}
在這個(gè)例子中，我們使用 createRef 創(chuàng)建了一個(gè) Ref，并將其存儲(chǔ)在 inputEl 變量中，我們將這個(gè) Ref 附加到 元素上，當(dāng)用戶點(diǎn)擊按鈕時(shí)，我們可以通過(guò) inputEl.current 訪問(wèn)到這個(gè)元素，并調(diào)用 focus 方法使其獲得焦點(diǎn)，同樣需要注意的是，我們需要使用可選鏈操作符來(lái)確保 current 屬性存在。
我們可能需要在多個(gè)組件之間共享一個(gè) Ref，為了實(shí)現(xiàn)這一點(diǎn)，我們可以將 Ref 作為 prop 傳遞給子組件，下面是一個(gè)例子：
import React, { useRef, forwardRef } from 'react';
const FancyTextInput = forwardRef((props, ref) => {
return ;
});
function App() {
const inputEl = useRef(null);
const handleButtonClick = () => {
inputEl.current?.focus();
};
return (
在這個(gè)例子中，我們使用 forwardRef API 創(chuàng)建了一個(gè)名為 FancyTextInput 的自定義組件，這個(gè)組件接受一個(gè)名為 ref 的 prop，并將其附加到內(nèi)部的 元素上，我們?cè)?App 組件中使用這個(gè)自定義組件，并將一個(gè) Ref 作為 prop 傳遞給它，當(dāng)用戶點(diǎn)擊按鈕時(shí)，我們可以通過(guò) inputEl.current 訪問(wèn)到這個(gè)元素，并調(diào)用 focus 方法使其獲得焦點(diǎn)，需要注意的是，由于我們使用了 forwardRef，所以我們不需要使用可選鏈操作符來(lái)確保 current 屬性存在。
當(dāng)前題目：ReactRefTypeScript用法
本文路徑：http://fisionsoft.com.cn/article/djecdpp.html
