记录react-connect中使用forwardRef 遇到的问题

项目场景：

之前独立的两个tab,  tab1和tab2,  由于需求变更,  要把这两个tab都放到一个tab4下, 变化大概是从图1变为图2

---

 原因: 

        子组件用了使用了connect, 相当于把forwardRef隔离了,导致父组件拿不到想要的方法, 所以需要把forwardRef 透传给使用了connect 的子组件  

问题描述：

       tip:  该文章以下内容中说的子组件指tab1和tab2,  父组件指tab4

       tab1和tab2组件都有"更新数据"按钮，将他们合并为tab4里面之后，"更新数据"按钮已经变成了父组件(tab4)的内容, 但是由于按钮的onClick事件中的逻辑太复杂,  所以点击事件没有挪出来重新写到父组件里。也就是：按钮在父组件中,  按钮的点击事件在子组件里写。

        子组件和父组件都是用函数组件 + Hook 写的， 并且子组件中都用了connect,  此时父组件想调用子组件的点击事件方法,  该怎么拿到子组件里的方法呢？

---

解决方案：

        tip:  我的项目使用的是umi2

        利用Hoc(高阶组件)透传ref

import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { connect } from 'dva'
const Children = (props) => {
  const { refInstance } = props
   
  const [text, setText] = useState('子组件:Children')
  const functionA = () => {
    console.log('c2方法')
    setText('ref改变了')
  }

  useImperativeHandle(refInstance, () => ({
    functionA,
    text,
  }))

  
return (
    <div>
      {text}
    </div>
)}

const newA =  connect((state) => {
  return {
    list: state.list,
  }
})(Children)
// 使用Hoc 透传 ref
export default forwardRef((props, ref) => <newA  {...props} refInstance={ref} />);