React.forwardRef 与 connect 联合使用问题

背景： 一般情况下，高阶组建是可以嵌套使用的，但是当我在使用forwardRef和connect互相嵌套时却出现了报错。如下：

function MessageBox(props: any, ref: any) {
  // .....
}
export default connect(({UserModel }: ConnectState) => ({
    userInfo: UserModel.userInfo,
  }))(forwardRef(MessageBox))

调用时报错: ref 未定义
原因： 直接这样写的话 是不行的因为ref被Hoc 高阶组件connect “隔离了”
解决办法：

//注意：这里不要在Component上使用ref;换个属性名字比如refInstance；不然会导致覆盖
function MessageBox(props: any) {
  const {refInstance} = props
}
export default connect(({UserModel }: ConnectState) => ({
    userInfo: UserModel.userInfo,
  }))(forwardRef(MessageBox))

问题解决了，但是上述导出方式会导致在控制台报一个警告：

image.png

解决办法： 查资料得知connect 有四个参数，其中我们可以在第四个参数中配置一些 connector 的行为

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

所以把导出方式更改为以下写法：

 export default connect(({UserModel }: ConnectState) => ({
   userInfo: UserModel.userInfo,
 }), null, null, { forwardRef: true })(MessageBox)

问题完美解决了！