中后台管理项目总结之React.forwardRef

111 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第5天,点击查看活动详情juejin.cn/post/714765…

  • 今天做项目时遇到了问题,平时子组件向父组件传参,我们都用回调函数,这次项目中需要把子组件的方法传到函数式组件,本来想给子组件添加ref属性,可是我的子组件是函数式组件,不能直接加ref属性,必须通过React.forwardRef来进行包裹子组件,然后通过React.useImperativeHandle(ref,()=>{})方法来暴露子组件。
  • 注意:如果子组件是函数式组件,直接加ref属性,react是会过滤掉的,所以不能通过ref属性直接在父组件里获取子组件的方法。

  • React.forwardRef(子组件名)
  • 它主要的作用,是告诉react不要把我的ref属性过滤掉,这样的话子组件除了接收props,还接收ref属性做为它的第二个参数。一定要用React.forwardRef(子组件名)把子组件包裹起来。
  • React.useImperativeHandle(ref,()=>{ return{} })该方法主要作用是子组件向父组件暴露自己。它的第一个参数ref是父组件传过来的ref属性,return出去的就是父组件能够得到的数据。
  • 下面给大家上代码,看一下,出了红线警告的地方是我把其他代码删掉了,只保留了今天分享的这两部分,让大家看起来更简洁。

微信图片_20221002221529.png

使用它们的时候,也要注意,在父组件里依然要给<PictureWail/>子组件添加ref属性,这样的话才可以正常使用它里面的getImgs()方法。函数式组件里就用useRef()hook给<PictureWail/>添加属性。

在父组件里照常通过current获取子组件 其实今天也是想了好久,百度了一下才知道,原来应该用这种方法给函数式子组件添加ref属性。 这几天一直在跟视频学习中后台管理项目,感觉很多时候都是发送请求,然后执行"添加"或"修改"操作,传必填参数,得到返回的数据,根据返回的数据判断是否请求成功,如果成功,再做相应的操作,更新状态或重新获取数据,不同操作做对应的处理。

有一天有一个人问我,重新发送了请求,也把新的数据请求回来了,但是没有渲染到页面上,我感觉可能是没有更新状态,或者是更新状态时写错了。我也不知道这个解答对不对,欢迎各位大神评论回复!!!