日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react使用useImperativeHandle示例詳解_React

作者：前端蘭博 ? 更新時間： 2022-11-14 編程語言

1.前言

相比大家看到useImperativeHandle會感到十分陌生，但部分開源代碼經常會出現它的身影，網上查閱的資料也是含糊不清。經過一翻資料查詢，終于摸清了一點，現在分享給各位爺。

2.useImperativeHandle初探

React官網的定義

useImperativeHandle?可以讓你在使用?ref?時自定義暴露給父組件的實例值。

個人理解

官網的話用大白話解析：useImperativeHandle的作用是將子組件的指定元素暴漏給父組件使用。也就是父組件可以訪問到子組件內部的特定元素。

3.獲取元素的幾種方式

下面我將逐步介紹獲取元素的方式，進而引出今天的主角useImperativeHandle。

3.1 useRef：獲取組件內部元素

import {useRef} from "react"
export default function() {
  //1.
  const ele = useRef()
  //3.獲取元素
  const getElememntP = () => {
    console.log(ele.current)
  }
  return <div >
    <button onClick={()=>getElememntP()}>獲取p元素</button>
    //2.
    <p ref={ref}></p>
  </div>
}

點擊按鈕，我們可以獲取到p元素。上面是useRef獲取元素的方法，先簡單小結下步驟

  • 引入useRef,定義變量
  • 在需要獲取的dom元素上使用ref進行變量綁定
  • 使用變量.current獲取對應元素

3.2 forwardRef：父組件獲取子組件內部的一個元素

上面的useRef在函數組件可以獲取自身組件內部的元素，但是如果我們需要在父組件獲取或者操作兒子組件的一個元素，此時forwardRef就隨之出現了。

father.js

import {useRef} from "react"
import Son from "./son"
export default function(){
  const eleP = useRef()
  const getElement = () => {
    console.log(eleP.current)
  }
  return <div>
    <button onClick={()=>getElement()}>點擊獲取子組件的p元素</button>
    <Son ref={eleP}/></div>
}

son.js

import {forwardRef} from "react"
export default forwardRef(function(props,ref){
  return <div >
    <p ref={ref}></p>
  </div>
})

父元素點擊按鈕后，可以獲取到兒子組件的p元素。

forwardRef在父組件獲取兒子組件內部一個元素時，操作如下。

  • 父組件按照useRef的規則綁定到兒子組件上
  • 兒子組件使用forwardRef包裹，并在函數組件傳遞的參數接收,第一個參數porps接收父組件傳遞的數據，第二個ref接收的就是dom引用
  • 在需要獲取兒子組件的元素上直接綁定ref的值

3.3 useImperativeHandle：父組件可以獲取/操作兒子組件多個元素

經過上面層層遞進，終于來到我們今天的主角了，請大聲告訴我她的名字：是usexxxHandle。它可以在父組件內部直接獲取兒子組件任意的dom元素對象。

father.js

import {useRef} from "react"
import Son from "./son"
export default function(){
  const eleP = useRef()
  const getElement = () => {
    console.log(eleP.current.ele1.current)
    console.log(eleP.current.ele2.current)
  }
  return <div>
    <button onClick={()=>getElement()}>點擊獲取子組件元素</button>
    <Son ref={eleP}/></div>
}

son.js

import {useRef,forwardRef,useImperativeHandle} from "react"
export default forwardRef(function(props,ref){
  const ele1 = useRef()
  const ele2 = useRef()
  useImperativeHandle(ref,()=>{
    return {ele1,ele2}
  },[])
  return <div >
    <h2 ref={ele1}></h2>
    <h3 ref={ele2}></h3>
  </div>
})

結果

<h2></h2>
<h3></h3>

父組件點擊按鈕后，可以一次性獲取到多個標簽元素，通過useImperativeHandle函數內部返回的對象可以獲取對應的標簽。具體使用直接看例子就行，我列舉下useImperativeHandle的參數要求吧

useImperativeHandle(ref,()=>{
    return {dom1,dom2}
},[])

第一個參數是組件的第二個參數ref 第二個參數是一個回調函數，內部返回的對象就是拋給父組件的元素對象 第三個參數是一個依賴數組，類似useEffect的依賴數組，如果依賴數組內部傳遞的數據發生改變，就會重新觸發回調函數。

原文鏈接：https://juejin.cn/post/7146095092674068487

欄目分類
最近更新