使用前向引用和使用固定處理的示例.在 React 的典型數(shù)據(jù)流中，道具是父子組件交互的唯一方式，要修改子組件，可以使用新道具重新渲染它。
除了典型的 React 數(shù)據(jù)流之外，在某些情況下(例如，專注于一個 DOM 元素等)為了修改子組件，我們可能需要另一種方式：Ref 方式。引用提供了一種訪問 DOM 節(jié)點或 React 元素的方法。
*由于本文使用了功能組件，因此我將重點介紹它們。讓我們從第一個示例開始，以便我們可以更好地理解。
示例一：對焦輸入
當(dāng)用戶單擊按鈕時將光標(biāo)聚焦在輸入上
假設(shè)我們有一個輸入字段，我們希望當(dāng)用戶開始鍵入或單擊按鈕時光標(biāo)聚焦于該字段。僅修改輸入字段更有意義，而不是更改狀態(tài)(通過 props)導(dǎo)致組件重新渲染，這可以通過創(chuàng)建 ref 來完成。
我們可以使用 useRef() 鉤子來創(chuàng)建一個 ref，該引用返回一個可變對象，其當(dāng)前屬性設(shè)置為我們傳遞給鉤子的初始值，并在 DOM 元素<輸入>上使用它：
控制臺.log(輸入引用)
很簡單，當(dāng)用戶開始鍵入時，輸入字段是聚焦的，但是由于某種原因，當(dāng)用戶單擊按鈕時，此輸入字段也應(yīng)該具有焦點，我們的輸入字段位于名為 InputWrapper 的反應(yīng)子組件中。
也許我們會嘗試這樣做：
這行不通，因為默認(rèn)情況下，refs只在原生HTML元素中工作，我們不能為React組件提供引用(在我們的例子中是InpinTraapper)，并且由于函數(shù)組件沒有實例，我們也可能不會在其上使用屬性，這意味著：ref
常規(guī)函數(shù)或類組件不接收參數(shù)，并且 ref 在 props 中也不可用。ref
因此，我們需要將輸入包裝器傳遞到 forwardRef 中，它接收傳遞給功能組件的 prop 和引用，并返回 JSX。它的元素。
const InputWrapper = forwardRef((props, ref) => {…})
創(chuàng)建 ref 并將其傳遞給應(yīng)用組件內(nèi)的輸入包裝器
應(yīng)用內(nèi)觸發(fā)焦點的按鈕事件處理程序
將引用轉(zhuǎn)發(fā)到輸入 DOM 元素
通過這樣做，我們告訴 React，這個組件可以接收一個 ref，而我們的第二個參數(shù)將是傳入的 ref。 InputWrapperrefforwardRef
*在類組件上也可以進(jìn)行引用轉(zhuǎn)發(fā)
示例二：播放/暫停視頻和對焦輸入
使用使用對多個引用使用簡化處理
在這個例子中，我們有一個視頻播放器和2個播放/暫停視頻的按鈕，當(dāng)我們點擊播放按鈕時，我們還想聚焦下面的輸入字段，這意味著我們將有多個引用(視頻，輸入)。
如何轉(zhuǎn)發(fā)多個引用?
第一個解決方案：我們可以創(chuàng)建 ref 并將它們傳遞到一個對象中，然后使用與上面示例中相同的邏輯。
家長應(yīng)用程序：
兒童視頻包裝：
第二種解決方案：使用反應(yīng)鉤子useImperativeHandle
使用反轉(zhuǎn)手處理自定義在使用 ref 時向父組件公開的實例值，它應(yīng)該與轉(zhuǎn)發(fā)引用一起使用。
這聽起來可能令人困惑，讓我們先更新組件：
在應(yīng)用程序內(nèi)創(chuàng)建一個引用并將其傳遞給視頻包裝器：
在視頻包裝器組件中，我們可以確定哪些屬性將使用使用在引用上公開翻譯手柄鉤子(您可以隨意調(diào)用它們：播放視頻，焦點此輸入，暫停Me等)
上面的代碼是什么意思?我們在鉤子內(nèi)添加方法，然后它們將被其父級公開和使用。useImperative Handle
如上面的示例所示，我們可以使用鉤子 forwardRef 訪問 React 函數(shù)子組件的基礎(chǔ) DOM 元素，我們可以處理多個引用，甚至可以通過將引用傳遞給其子級來修改父組件有權(quán)訪問的引用。
注意：使用ImperativeHandle啟用了命令性代碼，這與 React 的聲明性本質(zhì)背道而馳，這使得它非常獨特。由于這個原因，除非絕對需要，否則通常建議避免這種鉤子。
您可以查看結(jié)果并在此處嘗試。
京公網(wǎng)安備 11010802030320號