React?forwardRef?用法案例分析
React.forwardRef 會創(chuàng)建一個React組件，這個組件能夠?qū)⑵浣邮艿?ref 屬性轉(zhuǎn)發(fā)到其組件樹下的另一個組件中。這種技術(shù)并不常見，但在以下兩種場景中特別有用：
- 轉(zhuǎn)發(fā) refs 到 DOM 組件
- 在高階組件中轉(zhuǎn)發(fā) refs
本文重點介紹下React forwardRef 用法。
用法
forwardRef：允許你的組件使用 ref 將一個 DOM 節(jié)點暴露給父組件。
import { forwardRef } from 'react';
const MyInput = forwardRef((props, ref) => {
// ...
});案例分析：ref 屬性是 React 的特殊屬性，不能直接使用。
import {useRef} from 'react'
function InputCom({ref}) {
return (
<input type='text' ref={ref} />
)
}
function App() {
const inpRef = useRef(null)
const focus = () => {
inpRef.current?.focus()
}
return (
<>
<InputCom ref={inpRef} />
</>
)
}上面就會彈出報錯信息：
Warning: InputCom: `ref` is not a prop. Trying to access it will result in `undefined` being returned.
If you need to access the same value Within the child component, you should pass it as a company's prop.
// 警告:InputCom: 'ref不是一個prop。試圖訪問它將導(dǎo)致返回undefine。如果你需要在子組件中訪問相同的值，你應(yīng)該把它作為公司的prop傳遞。
如果想傳遞 ref，這時候就要借助 forwardRef 函數(shù)
import { forwardRef, useRef } from "react";
const InputCom = forwardRef((props, ref) => {
return <input type="text" ref={ref} />;
});
export default function ProRef() {
const inpRef = useRef(null);
const focus = () => {
inpRef.current?.focus();
};
return (
<>
<InputCom ref={inpRef} />
<button onClick={focus}>focus</button>
</>
);
}到此這篇關(guān)于React forwardRef 用法的文章就介紹到這了,更多相關(guān)React forwardRef 用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React Native 腳手架的基本使用詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
react將文件轉(zhuǎn)為base64上傳的示例代碼
本文主要介紹了react將文件轉(zhuǎn)為base64上傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
React組件中按鈕的loading狀態(tài)失效問題的解決方案
在React開發(fā)過程中,我遇到這樣的情況：頁面按鈕的loading屬性失效,盡管通過useEffect打印發(fā)現(xiàn)loading狀態(tài)（確實在true和false之間切換,但按鈕卻沒有表現(xiàn)出預(yù)期的加載效果,所以本文給大家介紹了失效的解決方案,需要的朋友可以參考下2025-07-07
本文主要介紹了react無限滾動組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
React?state結(jié)構(gòu)設(shè)計原則示例詳解
這篇文章主要為大家介紹了React?state結(jié)構(gòu)設(shè)計原則示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
隨著React應(yīng)用日益復(fù)雜,開發(fā)者需要借助模塊打包工具來管理項目依賴、轉(zhuǎn)換代碼和優(yōu)化性能,Webpack是一款功能強(qiáng)大的模塊打包器,它可以將React項目中的JavaScript、CSS、圖片等資源打包成瀏覽器友好的文件,本文將全面介紹如何使用Webpack打包React項目2025-03-03
這篇文章主要介紹了React?hooks?useState異步問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法
這篇文章主要介紹了React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
react中實現(xiàn)修改input的defaultValue
這篇文章主要介紹了react中實現(xiàn)修改input的defaultValue方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
React 中 map 處理異步數(shù)據(jù)不渲染的問題及解決方法
文章講述了在使用React時遇到的異步問題導(dǎo)致頁面卡頓的情況,通過Promise.all等方法解決了異步操作的順序問題,使得頁面能夠正常渲染,感興趣的朋友跟隨小編一起看看吧2026-01-01