背景： 一般情況下桃纯，高階組建是可以嵌套使用的喷橙，但是當我在使用forwardRef和connect互相嵌套時卻出現(xiàn)了報錯召廷。如下：
function MessageBox(props: any, ref: any) {
// .....
}
export default connect(({UserModel }: ConnectState) => ({
userInfo: UserModel.userInfo,
}))(forwardRef(MessageBox))
調(diào)用時報錯: 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 有四個參數(shù)，其中我們可以在第四個參數(shù)中配置一些 connector 的行為
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
所以把導出方式更改為以下寫法：
export default connect(({UserModel }: ConnectState) => ({
userInfo: UserModel.userInfo,
}), null, null, { forwardRef: true })(MessageBox)
問題完美解決了沃饶！
