React?forwardRef?用法案例分析
React.forwardRef 會(huì)創(chuàng)建一個(gè)React組件，這個(gè)組件能夠?qū)⑵浣邮艿?ref 屬性轉(zhuǎn)發(fā)到其組件樹(shù)下的另一個(gè)組件中。這種技術(shù)并不常見(jiàn)，但在以下兩種場(chǎng)景中特別有用：
- 轉(zhuǎn)發(fā) refs 到 DOM 組件
- 在高階組件中轉(zhuǎn)發(fā) refs
本文重點(diǎn)介紹下React forwardRef 用法。
用法
forwardRef：允許你的組件使用 ref 將一個(gè) DOM 節(jié)點(diǎn)暴露給父組件。
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} />
</>
)
}上面就會(huì)彈出報(bào)錯(cuò)信息：
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不是一個(gè)prop。試圖訪問(wèn)它將導(dǎo)致返回undefine。如果你需要在子組件中訪問(wèn)相同的值，你應(yīng)該把它作為公司的prop傳遞。
如果想傳遞 ref，這時(shí)候就要借助 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何在React項(xiàng)目中優(yōu)雅的使用對(duì)話(huà)框
在項(xiàng)目中,對(duì)話(huà)框和確認(rèn)框是使用頻率很高的組件,下面這篇文章主要給大家介紹了關(guān)于如何在React項(xiàng)目中優(yōu)雅的使用對(duì)話(huà)框的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來(lái)通過(guò)本文給大家介紹React中diff算法的相關(guān)知識(shí)，對(duì)React中diff算法感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05
React實(shí)現(xiàn)圖片懶加載的常見(jiàn)方式
圖片懶加載是一種優(yōu)化網(wǎng)頁(yè)性能的技術(shù),它允許在用戶(hù)滾動(dòng)到圖片位置之前延遲加載圖片,通過(guò)懶加載,可以在用戶(hù)需要查看圖片時(shí)才加載圖片,避免了不必要的圖片加載,本文給大家介紹了React實(shí)現(xiàn)圖片懶加載的常見(jiàn)方式,需要的朋友可以參考下2024-01-01
本文主要介紹了React18新增特性released的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
本文將探討 React 中 CSS 模塊沖突的常見(jiàn)原因,并提供解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了react+antd樹(shù)選擇下拉框中增加搜索框方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
React使用Ant Design方式(簡(jiǎn)單使用)
文章介紹了AntDesign組件庫(kù),它是基于AntDesign設(shè)計(jì)體系的ReactUI組件庫(kù),主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品,文章詳細(xì)講解了如何下載和按需引入antd組件庫(kù),并通過(guò)一個(gè)小案例展示了如何使用antd進(jìn)行布局和改造,最后,文章提醒大家在使用過(guò)程中可以參考官網(wǎng)的屬性介紹2024-11-11
ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解
這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
在React中,SVG（Scalable?Vector?Graphics）的使用非常普遍,因?yàn)樗鼈兲峁┝丝缮炜s的矢量圖形,這對(duì)于現(xiàn)代Web應(yīng)用來(lái)說(shuō)是非常重要的,以下是幾種常見(jiàn)的在React中使用SVG的方法,每種方法都有其特定的用例和最佳實(shí)踐,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了react腳手架如何配置less和ant按需加載的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11