欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React?forwardRef?用法案例分析

 更新時間：2023年06月29日 11:13:34   作者：一顆不甘墜落的流星  
這篇文章主要介紹了React forwardRef用法,forwardRef允許你的組件使用ref將一個DOM節(jié)點暴露給父組件，本文結(jié)合案例分析給大家講解的非常詳細，需要的朋友可以參考下

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項目中優(yōu)雅的使用對話框

    如何在React項目中優(yōu)雅的使用對話框

    在項目中,對話框和確認框是使用頻率很高的組件,下面這篇文章主要給大家介紹了關(guān)于如何在React項目中優(yōu)雅的使用對話框的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • 深入淺析React中diff算法

    深入淺析React中diff算法

    React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來通過本文給大家介紹React中diff算法的相關(guān)知識，對React中diff算法感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
    2021-05-05
  • React實現(xiàn)圖片懶加載的常見方式

    React實現(xiàn)圖片懶加載的常見方式

    圖片懶加載是一種優(yōu)化網(wǎng)頁性能的技術(shù),它允許在用戶滾動到圖片位置之前延遲加載圖片,通過懶加載,可以在用戶需要查看圖片時才加載圖片,避免了不必要的圖片加載,本文給大家介紹了React實現(xiàn)圖片懶加載的常見方式,需要的朋友可以參考下
    2024-01-01
  • React18新增特性released的使用

    React18新增特性released的使用

    本文主要介紹了React18新增特性released的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • React中CSS模塊沖突的問題及解決

    React中CSS模塊沖突的問題及解決

    本文將探討 React 中 CSS 模塊沖突的常見原因,并提供解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2025-03-03
  • react+antd樹選擇下拉框中增加搜索框

    react+antd樹選擇下拉框中增加搜索框

    這篇文章主要介紹了react+antd樹選擇下拉框中增加搜索框方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • React使用Ant Design方式(簡單使用)

    React使用Ant Design方式(簡單使用)

    文章介紹了AntDesign組件庫,它是基于AntDesign設(shè)計體系的ReactUI組件庫,主要用于研發(fā)企業(yè)級中后臺產(chǎn)品,文章詳細講解了如何下載和按需引入antd組件庫,并通過一個小案例展示了如何使用antd進行布局和改造,最后,文章提醒大家在使用過程中可以參考官網(wǎng)的屬性介紹
    2024-11-11
  • ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解

    ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解

    這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-11-11
  • 在React中使用SVG的幾種方式

    在React中使用SVG的幾種方式

    在React中,SVG（Scalable?Vector?Graphics）的使用非常普遍,因為它們提供了可伸縮的矢量圖形,這對于現(xiàn)代Web應(yīng)用來說是非常重要的,以下是幾種常見的在React中使用SVG的方法,每種方法都有其特定的用例和最佳實踐,需要的朋友可以參考下
    2024-11-11
  • react腳手架如何配置less和ant按需加載的方法步驟

    react腳手架如何配置less和ant按需加載的方法步驟

    這篇文章主要介紹了react腳手架如何配置less和ant按需加載的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11

最新評論