1.前言

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

2.useImperativeHandle初探

React官網(wǎng)的定義

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

個(gè)人理解

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

3.獲取元素的幾種方式

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

3.1 useRef：獲取組件內(nèi)部元素

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>
}

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

• 引入useRef,定義變量
• 在需要獲取的dom元素上使用ref進(jìn)行變量綁定
• 使用變量.current獲取對應(yīng)元素

3.2 forwardRef：父組件獲取子組件內(nèi)部的一個(gè)元素

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

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()}>點(diǎn)擊獲取子組件的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>
})

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

forwardRef在父組件獲取兒子組件內(nèi)部一個(gè)元素時(shí)，操作如下。

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

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

經(jīng)過上面層層遞進(jìn)，終于來到我們今天的主角了，請大聲告訴我她的名字：是usexxxHandle。它可以在父組件內(nèi)部直接獲取兒子組件任意的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()}>點(diǎn)擊獲取子組件元素</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>
})

結(jié)果

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

父組件點(diǎn)擊按鈕后，可以一次性獲取到多個(gè)標(biāo)簽元素，通過useImperativeHandle函數(shù)內(nèi)部返回的對象可以獲取對應(yīng)的標(biāo)簽。具體使用直接看例子就行，我列舉下useImperativeHandle的參數(shù)要求吧

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

第一個(gè)參數(shù)是組件的第二個(gè)參數(shù)ref 第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，內(nèi)部返回的對象就是拋給父組件的元素對象 第三個(gè)參數(shù)是一個(gè)依賴數(shù)組，類似useEffect的依賴數(shù)組，如果依賴數(shù)組內(nèi)部傳遞的數(shù)據(jù)發(fā)生改變，就會重新觸發(fā)回調(diào)函數(shù)。

以上就是react使用useImperativeHandle示例詳解的詳細(xì)內(nèi)容，更多關(guān)于react使用useImperativeHandle的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論