React兄弟类组件调用带参函数报错，求助传参与调用方法

问题根源 #

1. 调用方式完全错误：你在XYtoPM里用new plot_PMSegment(...)是错误操作，plot_PMSegment是PMtoXY类的实例方法，不能用new关键字调用，而且你根本没获取到PMtoXY的组件实例引用。
2. 兄弟组件无直接访问权限：React兄弟组件之间不存在直接的引用关系，无法跨组件直接调用对方的实例方法。
3. import位置违规：import PMtoXY from "./PMtoXY";必须放在文件最顶部，不能写在class内部。

正确解决方案：通过父组件中转 #

兄弟组件的交互必须借助共同的父组件实现，具体步骤如下：

1. 编写父组件 #

创建父组件同时渲染两个子组件，通过ref获取PMtoXY的实例，再把调用方法的逻辑通过props传给XYtoPM：

import React, { Component } from 'react';
import PMtoXY from './PMtoXY';
import XYtoPM from './XYtoPM';

class ParentComponent extends Component {
  pmToXYRef = React.createRef<PMtoXY>();

  render() {
    return (
      <div>
        <PMtoXY ref={this.pmToXYRef} />
        <XYtoPM 
          triggerPlotSegment={(begId, endId) => {
            this.pmToXYRef.current?.plot_PMSegment(begId, endId);
          }} 
        />
      </div>
    );
  }
}

export default ParentComponent;

2. 调整PMtoXY组件 #

确保组件支持ref引用，你的代码里已经用箭头函数绑定了this，无需额外修改，只需补全参数类型注解：

import React, { Component } from 'react';

interface IProps {}

class PMtoXY extends Component<IProps> {
  plot_PMSegment = (beg_routeid: string | number, end_routeid: string | number) => {
    // 你的原有业务逻辑
    console.log('方法触发', beg_routeid, end_routeid);
  };

  render() {
    return <div>PMtoXY Component</div>;
  }
}

export default PMtoXY;

3. 修改XYtoPM组件 #

接收父组件传过来的回调函数，在需要的时机调用：

import React, { Component } from 'react';

interface IProps {
  triggerPlotSegment: (begId: string | number, endId: string | number) => void;
}

class XYtoPM extends Component<IProps> {
  handleCallMethod = () => {
    const therouteid = '你的起始ID'; // 替换为实际参数值
    const theend_routeid = '你的结束ID'; // 替换为实际参数值
    // 调用父组件传递的回调
    this.props.triggerPlotSegment(therouteid, theend_routeid);
  };

  render() {
    return <button onClick={this.handleCallMethod}>调用PMtoXY的方法</button>;
  }
}

export default XYtoPM;

额外注意事项 #

• 给方法参数加上TypeScript类型注解，避免类型不匹配的错误。
• 使用ref获取实例时，用可选链?.避免组件未挂载时current为null导致的报错。

内容的提问来源于stack exchange，提问作者Lefteris Koumis