使用useImperativeHandle時(shí)父組件第一次沒拿到子組件的問題

更新時(shí)間：2022年08月09日 08:50:20 作者：daoke_li

這篇文章主要介紹了使用useImperativeHandle時(shí)父組件第一次沒拿到子組件的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

用useImperativeHandle父組件第一次沒拿到子組件

背景需求

一個(gè)tab兩個(gè)按鈕A、B，默認(rèn)選中的A，當(dāng)點(diǎn)擊到B時(shí)需要顯示B對(duì)應(yīng)的圖表。

考慮到B的圖表在頁(yè)面加載時(shí)已經(jīng)初始化完成，所以點(diǎn)擊B時(shí)再調(diào)用圖表的resize方法。

由于tab中的圖表是寫在子組件里，所以通過useImperativeHandle實(shí)現(xiàn)父組件調(diào)用子組件方法，React版本"react": "^18.1.0",代碼如下

父組件：

const childRef = useRef()
const item = [{
? ? ? ? name: 'XXXX',
? ? ? ? content: <RunningRecord cRef={childRef} />,
? ? ? ? handClick: childRef.current?.resizeChart
}]
return <>
? ? ……
? ? <li onClick={() => {
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? console.log('~~item.handClick',item.handClick)
? ? ? ? ? ? ? ? item.handClick?.()
? ? ? ? ? ? }, 200)
? ? ? ? }}
? ? ? ? key={item.name}>
? ? ? ? {item.name}
? ? </li>
? ? ……
? ? <RunningRecord cRef={childRef} />
</>

子組件：

function RunningRecord({ cRef }) {
? ? ……
? ? useImperativeHandle(cRef,()=>({
? ? ? ? resizeChart:()=> {dosomething……}
? ? }))

問題

這樣寫在本地開發(fā)模式中正常運(yùn)行，但生產(chǎn)環(huán)境中父組件首次加載不能拿到子組件的方法，需tab切換到A再次且到B才行。

猜想原因，大概在生產(chǎn)環(huán)境中，父組件把子組件暴露出來的方法綁定到UI中的點(diǎn)擊事件中，而子組件初始化的時(shí)機(jī)晚，初始完成后并沒有把事件傳回來。

這個(gè)猜想不一定準(zhǔn)確，歡迎知道的小伙伴們補(bǔ)充。

解決方法

在父組件中，將子組件賦值的過程放在useEffect中，不寫依賴項(xiàng)參數(shù)(不是沒有依賴的空數(shù)組)，再運(yùn)行，一切正常。

const usageRecordData = [{
? ? name: 'XXXX',
? ? content: <RunningRecord cRef={childRef} />,
}]
useEffect(() => {
? ? usageRecordData[1].handClick = childRef.current?.resizeChart
})

用useImperativeHandle讓父組件操縱子組件的狀態(tài)和方法

useImperativeHandle是react官方為了簡(jiǎn)便我們的ref操作，同時(shí)還可以讓子組件返回給父組件自身的狀態(tài)和方法去調(diào)用

useRef將ref綁定到某個(gè)子組件標(biāo)簽上，用以獲取整個(gè)子組件的方法和參數(shù)

useImperativeHandle: 可以自定義暴露給父組件的方法或者變量

父組件

import React, { useState, useRef } from 'react'
import ChildList from './ChildList'
export default () => {
? ? let parentRef = useRef(null)
? ? const [name, setName] = useState('li')
? ? return <div>
? ? ? ? <ChildList parentRef={parentRef} name={name}></ChildList>
? ? ? ? <button onClick={() => {
? ? ? ? ? ? console.log("parentRef", parentRef)
? ? ? ? }}>獲取子組件</button>
? ? </div>
}

子組件

import React, { useImperativeHandle, forwardRef } from 'react'
export default forwardRef((props, ref) => {
? ? console.log("ref", ref)
? ? useImperativeHandle(ref, () => {
? ? ? ? return {
? ? ? ? ? ? childFn
? ? ? ? }
? ? })
? ? console.log(ref)
? ? const childFn = () => {
? ? ? ? console.log('子組件方法')
? ? }
? ? return <div>
? ? ? ? <div ref={ref} />
? ? </div>
})

用了ref的橋梁就這樣就可以在父組件中控制子組件了，而不僅僅只是子隨父渲染了。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: