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

Posted on by

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

背景需求

一個tab兩個按鈕A、B，默認選中的A，當點擊到B時需要顯示B對應的圖表。

考慮到B的圖表在頁面加載時已經初始化完成，所以點擊B時再調用圖表的resize方法。

由於tab中的圖表是寫在子組件裡，所以通過useImperativeHandle實現父組件調用子組件方法，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……}
    }))

問題

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

猜想原因，大概在生產環境中，父組件把子組件暴露出來的方法綁定到UI中的點擊事件中，而子組件初始化的時機晚，初始完成後並沒有把事件傳回來。

這個猜想不一定準確，歡迎知道的小夥伴們補充。

解決方法

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

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

用useImperativeHandle讓父組件操縱子組件的狀態和方法

useImperativeHandle是react官方為瞭簡便我們的ref操作，同時還可以讓子組件返回給父組件自身的狀態和方法去調用

useRef將ref綁定到某個子組件標簽上，用以獲取整個子組件的方法和參數

  • 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的橋梁就這樣就可以在父組件中控制子組件瞭，而不僅僅隻是子隨父渲染瞭。 

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：