工作记录8:react调用组件,父组件渲染问题

354 阅读2分钟

问题描述:

背景: 在父组件中调用一个公共组件,通过props将方法函数传递给子组件完成初始请求,在app端进行操作之后,监听app的jssdk,再次进行数据请求并重新渲染视图

遇到的问题: 请求数据的方法,以及父组件中需要渲染的部分,通过props传递给子组件,子组件获取数据后,将获取的数据渲染到父组件传递过来的DOM中,在父组件中监听jssdk,进行下一次请求,公共组件不能出发视图的更新

代码如下:

父组件中需要通过公共组件渲染的部分: image.png

调用公共组件的部分: image.png

子组件调用父组件请求数据方法: image.png

公共组件渲染部分: image.png

监听jssdk: image.png

这样处理,虽然调用了方法,但实际上只是在父组件中调用了,这操作是无效的

解决思路:

让公共组件去再次调用方法,进行页面的重新渲染

那么要怎么做才能让公共组件再次调用方法呢?

首先,在公共组件中定义重新调用请求数据的方法: image.png

然后使用了useImperativeHandle,将这个方法对外暴露,并且将父组件传递的ref也同时再暴露出去 image.png

image.png

在父组件中,初始化定义ref,并将ref传递给公共组件 image.png

image.png

image.png

在父组件中,监听到jssdk后,通过ref调用公共组件中定义的方法

先判断是否公共组件是否接收到了父组件中定义的ref,并且暴露出来,成功之后,通过ref调用公共组件中定义的reload方法重新请求数据完成再次渲染达到更新视图的操作 image.png