使用useImperativeHandle时父组件第一次没拿到子组件方法

最新推荐文章于 2025-04-19 22:28:19 发布

daoke_li

最新推荐文章于 2025-04-19 22:28:19 发布

阅读量893

点赞数

分类专栏：前端移动开发前端 react hook 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/daoke_li/article/details/125497743

版权

前端同时被 3 个专栏收录

95 篇文章

订阅专栏

前端移动开发

32 篇文章

订阅专栏

react hook

5 篇文章

订阅专栏

本文探讨了在使用React的useImperativeHandle时，父组件初次加载未能获取子组件方法的问题。通过分析原因并提出在useEffect中延迟设置方法，解决了这个问题。关键在于理解组件渲染时机与方法绑定的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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
})