久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

        手機站
        千鋒教育

        千鋒學習站 | 隨時隨地免費學

        千鋒教育

        掃一掃進入千鋒手機站

        領取全套視頻
        千鋒教育

        關注千鋒學習站小程序
        隨時隨地免費學習課程

        當前位置:首頁  >  技術干貨  > 使用引用響應功能組件

        使用引用響應功能組件

        來源:千鋒教育
        發(fā)布人:syq
        時間: 2022-09-21 14:38:00 1663742280

          使用前向引用和使用固定處理的示例.在 React 的典型數(shù)據(jù)流中,道具是父子組件交互的唯一方式,要修改子組件,可以使用新道具重新渲染它。

        1

          除了典型的 React 數(shù)據(jù)流之外,在某些情況下(例如,專注于一個 DOM 元素等)為了修改子組件,我們可能需要另一種方式:Ref 方式。引用提供了一種訪問 DOM 節(jié)點或 React 元素的方法。

          *由于本文使用了功能組件,因此我將重點介紹它們。讓我們從第一個示例開始,以便我們可以更好地理解。

          示例一:對焦輸入

        2


          當用戶單擊按鈕時將光標聚焦在輸入上

          假設我們有一個輸入字段,我們希望當用戶開始鍵入或單擊按鈕時光標聚焦于該字段。僅修改輸入字段更有意義,而不是更改狀態(tài)(通過 props)導致組件重新渲染,這可以通過創(chuàng)建 ref 來完成。

          我們可以使用 useRef() 鉤子來創(chuàng)建一個 ref,該引用返回一個可變對象,其當前屬性設置為我們傳遞給鉤子的初始值,并在 DOM 元素<輸入>上使用它:

        3

          控制臺.log(輸入引用)

          很簡單,當用戶開始鍵入時,輸入字段是聚焦的,但是由于某種原因,當用戶單擊按鈕時,此輸入字段也應該具有焦點,我們的輸入字段位于名為 InputWrapper 的反應子組件中。

          也許我們會嘗試這樣做:

        4

          這行不通,因為默認情況下,refs只在原生HTML元素中工作,我們不能為React組件提供引用(在我們的例子中是InpinTraapper),并且由于函數(shù)組件沒有實例,我們也可能不會在其上使用屬性,這意味著:ref

          常規(guī)函數(shù)或類組件不接收參數(shù),并且 ref 在 props 中也不可用。ref

          因此,我們需要將輸入包裝器傳遞到 forwardRef 中,它接收傳遞給功能組件的 prop 和引用,并返回 JSX。它的元素。

          const InputWrapper = forwardRef((props, ref) => {…})

        5

          創(chuàng)建 ref 并將其傳遞給應用組件內(nèi)的輸入包裝器

        6

        應用內(nèi)觸發(fā)焦點的按鈕事件處理程序

        7

        將引用轉發(fā)到輸入 DOM 元素

          通過這樣做,我們告訴 React,這個組件可以接收一個 ref,而我們的第二個參數(shù)將是傳入的 ref。 InputWrapperrefforwardRef

          *在類組件上也可以進行引用轉發(fā)

          示例二:播放/暫停視頻和對焦輸入

        8


          使用使用對多個引用使用簡化處理

          在這個例子中,我們有一個視頻播放器和2個播放/暫停視頻的按鈕,當我們點擊播放按鈕時,我們還想聚焦下面的輸入字段,這意味著我們將有多個引用(視頻,輸入)。

          如何轉發(fā)多個引用?

          第一個解決方案:我們可以創(chuàng)建 ref 并將它們傳遞到一個對象中,然后使用與上面示例中相同的邏輯。

          家長應用程序:

        9

          兒童視頻包裝:

        10

          第二種解決方案:使用反應鉤子useImperativeHandle

          使用反轉手處理自定義在使用 ref 時向父組件公開的實例值,它應該與轉發(fā)引用一起使用。

          這聽起來可能令人困惑,讓我們先更新組件:

          在應用程序內(nèi)創(chuàng)建一個引用并將其傳遞給視頻包裝器:

        11

          在視頻包裝器組件中,我們可以確定哪些屬性將使用使用在引用上公開翻譯手柄鉤子(您可以隨意調(diào)用它們:播放視頻,焦點此輸入,暫停Me等)

        12

          上面的代碼是什么意思?我們在鉤子內(nèi)添加方法,然后它們將被其父級公開和使用。useImperative Handle

          如上面的示例所示,我們可以使用鉤子 forwardRef 訪問 React 函數(shù)子組件的基礎 DOM 元素,我們可以處理多個引用,甚至可以通過將引用傳遞給其子級來修改父組件有權訪問的引用。

          注意:使用ImperativeHandle啟用了命令性代碼,這與 React 的聲明性本質背道而馳,這使得它非常獨特。由于這個原因,除非絕對需要,否則通常建議避免這種鉤子。

          您可以查看結果并在此處嘗試。

        tags:
        聲明:本站稿件版權均屬千鋒教育所有,未經(jīng)許可不得擅自轉載。
        10年以上業(yè)內(nèi)強師集結,手把手帶你蛻變精英
        請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
        免費領取
        今日已有369人領取成功
        劉同學 138****2860 剛剛成功領取
        王同學 131****2015 剛剛成功領取
        張同學 133****4652 剛剛成功領取
        李同學 135****8607 剛剛成功領取
        楊同學 132****5667 剛剛成功領取
        岳同學 134****6652 剛剛成功領取
        梁同學 157****2950 剛剛成功領取
        劉同學 189****1015 剛剛成功領取
        張同學 155****4678 剛剛成功領取
        鄒同學 139****2907 剛剛成功領取
        董同學 138****2867 剛剛成功領取
        周同學 136****3602 剛剛成功領取
        相關推薦HOT
        宁海县| 观塘区| 鸡泽县| 凌海市| 遵义市| 合水县| 重庆市| 潍坊市| 芷江| 揭东县| 公主岭市| 芦山县| 涞源县| 加查县| 桦甸市| 南昌市| 库尔勒市| 大荔县| 荣昌县| 丰都县| 阆中市| 马尔康县| 保山市| 栾城县| 邵东县| 白水县| 教育| 海兴县| 商洛市| 鞍山市| 浠水县| 竹溪县| 涟水县| 百色市| 灵川县| 长寿区| 寻乌县| 阳原县| 怀集县| 林芝县| 浪卡子县|