记录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?: FunctionmapDispatchToProps?: Function | ObjectmergeProps?: Functionoptions?: 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实例。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
浅析history 和 react-router 的实现原理
react-router 版本更新非常快,但是它的底层实现原理确是万变不离其中,在本文中会从前端路由出发到 react-router 原理总结与分享,本文对history 和 react-router实现原理讲解的非常详细,需要的朋友跟随小编一起看看吧2023-08-08
下面小编就为大家带来一篇基于react组件之间的参数传递(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法,本文为大家整理了React使用Context的一些优化建议,希望对大家有所帮助2024-04-04
这篇文章主要为大家介绍了React中immutable的UI组件渲染性能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了VSCode搭建React Native环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
本文主要介绍了react脚手架配置代理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
React 和 MobX 是一对强力组合，React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染，而MobX提供机制来存储和更新应用状态供 React 使用，这篇文章主要介绍了React+Mobx基本使用、模块化,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了redux的原理、工作流程及其应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了react中context传值和生命周期,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
React 是一个用于构建用户界面的 Javascript库，接下来将通过实战小红书首页的详细介绍其设计思路和方法，将读者带入到react的开源世界,需要的朋友可以参考下2022-07-07
最新评论