想要引用被react-redux库connect高阶组件包裹的WrappedComponent的ref的坑

在React中，想要在父组件引用子组件的属性或方法就需要使用ref将子组件的组件实例在父组件中引入。

但是如果子组件export的是使用react-redux库的connect函数封装的话

export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent)

在父组件render函数中渲染子组件

时获取ref会报错，提示

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

这个原因是connect函数是会使用一个匿名父组件render被包裹元素，而这个匿名父组件还会在一个外部function中被返回，而React不允许渲染function组件的事件引入ref，所以报warning，父组件的childComponent变量肯定也拿不到东西。

怎么样解决这个问题就是需要将内部的子组件ref透传出来，在以前的react-redux版本中，connect函数的第四个参数options对象可以将withRef置为true，这样connected的新匿名组件就会将ref传递到被包裹的子组件中，开发者渲染的connected component就可以拿到目标子组件的ref实例，故

export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(Child    Component);

结果又报错，这一次不是wanring了，直接抛出了错误

Uncaught Error: withRef is removed. To access the wrapped instance, use a ref on the connected component

options对象的withRef被removed了，react-redux提示你在connected component即匿名父组件中使用ref获取被包裹子组件的ref，这不是难为我，我去改源码？？？，然后一查发现只是API名换了，从withRef换成了forwardRef，这forwardRef是个啥？？？然后一查，发现是React标准的透传ref函数，应该也是和connect一样是一个高阶组件？？？更改后可以愉快地跑起来了。

export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ChildComponent);

这个应该是react-redux从以前的自己实现的ref传递改成了标准的React.forwardRef(WrappedComponent) API，而React的forwardRef函数应该也是使用的ref传递实现的ref透传。

再提一嘴，

forwardRef的用法是这样的：

class ParentComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {};
        
        this.ChildRef = React.createRef();
    }

    render () {
        return (
            
        );
    }
}

class ChildComponent extends Component {
    render () {
        return 
asd
;
    }
}

const forwardRefChildComponent = React.forwardRef((props, ref) => {
    return ;
});

// 这样在父组件中定义的this.ChildRef就是ChildComponent实例