React使用connect后，如何处理ref.current为null的问题？

本文共计965个文字，预计阅读时间需要4分钟。

目录+问题+分析+最终解决方案+总结+问题+在用React开发项目的过程中，遇到一个问题，使用connect连接低阶组件包裹成高阶组件HOC后，父组件通过ref调用子组件方法时，提示xxxRef.current为

分析：在React中，使用ref来访问DOM元素或组件实例时，需要在父组件中通过ref属性传递一个函数给子组件，该函数将返回一个ref对象。在子组件中，使用React.forwardRef将ref传递到低阶组件（LWC），然后在低阶组件中访问到这个ref。如果在父组件中使用ref调用子组件方法时出现问题，可能的原因有以下几点：

1. 父组件中的ref引用错误，未正确传递给子组件。

2.子组件中的React.forwardRef使用错误，导致ref未能正确传递。

3.子组件中未正确使用ref来调用方法。

解决方案：

1.确保父组件中的ref属性正确传递给子组件。

2.子组件中正确使用React.forwardRef来传递ref。

3.子组件中正确使用ref来调用方法。

具体代码如下：

jsx

// 父组件import React, { useRef } from 'react';import ChildComponent from './ChildComponent';

function ParentComponent() { const childRef=useRef();

const callChildMethod=()=> { childRef.current?.childMethod(); };

return ( );}

export default ParentComponent;

// 子组件import React from 'react';import React.forwardRef from 'react-forward-ref';

const ChildComponent=React.forwardRef((props, ref)=> { // 使用ref来调用方法 React.useImperativeHandle(ref, ()=> ({ childMethod() { console.log('Child method called'); } }));

return Child Component;});

export default ChildComponent;

总结：通过正确使用ref和React.forwardRef，可以确保父组件能够通过ref调用子组件的方法。在上述代码中，通过在子组件中使用React.forwardRef和React.useImperativeHandle，确保了父组件可以通过ref调用子组件的方法。

目录

• 问题
• 解析
• 最终解决方案
• 总结

问题

在用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实例。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。