記錄React使用connect后,ref.current為null問題及解決

目錄

• 問題
• 解析
• 最終解決方案
• 總結

問題

在用React開發項目的過程中，遇到一個問題，使用connect連接低階組件包裝成高階組件HOC后，父組件通用ref調用子組件方法時，提示xxxRef.current為null的錯誤。

代碼如下：

// 子組件
// 通過connect方式連接為高階組件
export default connect(
? ? mapStateToProps,
)(ComboSelectorForm);

// 父組件
constructor(props: IComboSelectorListProps | Readonly<IComboSelectorListProps>) {
? ? super(props);
? ? // ...
? ? this.formRef = React.createRef();
? ? // ...
}
// 組件掛載在formRef上
<ComboSelectorForm
? ? ref={this.formRef}
? ? id={this.state.id}
? ? onSaveSuccess={this.handleSaveSuccess}
>
</ComboSelectorForm>
// 調用子組件方法
this.formRef.current.methodName();

父組件調用子組件方法后，報以下錯誤

TypeError: Cannot read properties of null (reading 'methodName')

解析

React的高階組件HOC，可以理解成在低階組件上進行一些封裝。

高階組件HOC如果不做一些特殊處理，是無法直接訪問低階組件實例的，要想通過ref訪問低階組件實例，調用connect時，需要傳遞參數{forwardRef : true}。

connect方法有四個參數，官方文檔是這樣說明的：

• mapStateToProps?: Function
• mapDispatchToProps?: Function | Object
• mergeProps?: Function
• options?: Object

對于前面三個參數先不展開來講解，主要第四個options參數，有以下幾個屬性：

{
? context?: Object,
? pure?: boolean,
? areStatesEqual?: Function,
? areOwnPropsEqual?: Function,
? areStatePropsEqual?: Function,
? areMergedPropsEqual?: Function,
? forwardRef?: boolean,
}

其中最后一個參數forwardRef正是我們的主角，官方文檔里這樣解釋：

If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

當該參數forwardRef設置為true時，包裹組件（wrapper component ）的ref屬性將會實際返回被包裹組件（wrapped component）實例。

OS：原諒我翻譯水平有限。(>_<)

最終解決方案

直接上代碼：

// 子組件
// 通過connect方式連接為高階組件
export default connect(
? ? mapStateToProps,
? ? null,?? ?// 新加參數
? ? null,?? ?// 新加參數
? ? { forwardRef: true }?? ?// 新加參數
)(ComboSelectorForm);

// 父組件，與之前代碼一致
constructor(props: IComboSelectorListProps | Readonly<IComboSelectorListProps>) {
? ? super(props);
? ? // ...
? ? this.formRef = React.createRef();
? ? // ...
}
// 組件掛載在formRef上
<ComboSelectorForm
? ? ref={this.formRef}
? ? id={this.state.id}
? ? onSaveSuccess={this.handleSaveSuccess}
>
</ComboSelectorForm>
// 調用子組件方法
this.formRef.current.methodName();

通過以上改造后，父組件能夠正常訪問ref實例。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持。