如何在React组件外部访问state与调用方法，实现策略模式处理鼠标事件

你当前的实现有两个核心问题：

1. 策略类没有保存传入的React组件实例，方法里的this指向策略类自身实例，自然无法访问组件的setState等方法
2. 组件构造函数中用const mouseStrat2声明的是局部变量，无法在组件其他生命周期/方法中访问

以下是完整调整方案：

1. 修改策略类，存储组件实例 #

在策略类的构造函数中接收传入的组件实例并保存，所有对组件的操作都通过这个存储的实例触发：

export class StartEndStrat {
  // 构造函数接收组件实例并存储
  constructor(component) {
    this.component = component
  }
  handleMouseDown(row, col) {
    // 通过存储的组件实例调用setState和实例方法
    this.component.setState({ mouseLeftDown: true });
    this.component.resetGrid();
  }

  handleMouseEnter(row, col) {
    console.log('start end strat');
  }
}

export class WallStrat {
  constructor(component) {
    this.component = component
  }
  handleMouseDown(row, col) {
    this.component.setState({ mouseLeftDown: true });
  }

  handleMouseEnter(row, col) {
    console.log('wallstrat');
  }
}

2. 修正React组件的实例属性声明 #

把策略实例挂载为组件的实例属性，初始化和切换策略时都传入当前组件的this实例：

export default class PathfindingVisualizer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            grid: [],
            mouseLeftDown: false,
        };
        // 声明为组件实例属性，而非局部变量
        this.mouseStrat2 = null;
    }

    componentDidMount() {
        this.resetGrid();
        // 初始化策略类时传入当前组件实例
        this.mouseStrat2 = new StartEndStrat(this);
    }

    // 你自己实现的resetGrid实例方法
    resetGrid = () => {
      // 你的原有逻辑
    }

    render() {
        return (<>
          <button onClick={() => this.mouseStrat2 = new StartEndStrat(this)}>startendstrat</button>
          <button onClick={() => this.mouseStrat2 = new WallStrat(this)}>wallstrat</button>
          {/* 网格节点绑定策略方法示例 */}
          {this.state.grid.map((row, rowIdx) => 
            row.map((col, colIdx) => 
              <div 
                key={`${rowIdx}-${colIdx}`}
                onMouseDown={() => this.mouseStrat2.handleMouseDown(rowIdx, colIdx)}
                onMouseEnter={() => this.mouseStrat2.handleMouseEnter(rowIdx, colIdx)}
              />
            )
          )}
        </>)
    }
}

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