使用React-Redux时如何调用另一个类的函数，解决connect参数错误问题

• React-Redux的connect高阶函数只接收React组件作为参数，你代码中传给connect的是new AddressService()生成的普通类实例，不属于React组件，直接触发报错。
• 你要调用的TestFunction定义在FirstClass组件内，但你当前的导出逻辑完全没有关联FirstClass，就算没有connect报错也无法调用到目标方法。

1. 修正FirstClass文件的connect绑定逻辑 #

将connect绑定到FirstClass组件上，而不是AddressService实例：

import { Component } from "react";
import { GetCityListFromActiveAddressSource } from '../Services/AddressService'
import { connect } from 'react-redux';

class FirstClass extends Component{
 constructor(props){
    super(props);
 }

 TestFunction(){
    alert("test");
 }

 render(){
    return null
 }
}

const mapStateToProps = ({ Modules }) => {
 const { GetDynamicMenuList } = Modules;
 return { GetDynamicMenuList }
}

// 核心修正：connect绑定React组件FirstClass
export default connect(mapStateToProps,{GetCityListFromActiveAddressSource})(FirstClass);

2. 修正第二个组件的方法调用逻辑 #

要调用类组件内部的方法，需要通过ref获取组件实例后再调用，不能直接导入组件就调用方法：

import React, { Component, createRef } from 'react';    
import FirstClass from '../../../ServiceClient/FirstClass';

class SecondClass extends Component {
 constructor(props) {
    super(props);
    // 声明ref存储FirstClass组件实例
    this.firstClassRef = createRef();
 }

 componentDidMount(){
    // 从ref中获取实例后调用目标方法
    this.firstClassRef.current?.TestFunction();
 }

 render() {
    // 渲染FirstClass组件并绑定ref
    return <FirstClass ref={this.firstClassRef} />
 }
}

如果你使用的是React Redux 7.0以下版本，connect默认会隐藏内部组件的ref，需要额外开启forwardRef配置：

// 第四个参数开启forwardRef透传ref
export default connect(mapStateToProps, {GetCityListFromActiveAddressSource}, null, { forwardRef: true })(FirstClass);

如果TestFunction不需要依赖组件内部状态和props，完全可以抽为独立的公共工具函数，直接导入调用即可，不需要走组件渲染+ref的逻辑，可维护性更高。

内容的提问来源于stack exchange，提问作者Veysel Turan