React技术问题：如何访问生成JSX的类的方法？

嘿，我来帮你搞定这个问题——你现在的核心误区是：把getRegPawn返回的JSX元素存在了this.pawns里，但JSX只是React用来生成DOM的描述对象，不是RegularPawn的组件实例，自然没法直接调用它的isBasicMove、isStrikeMove这些实例方法。要拿到组件实例并调用方法，必须用React Refs，下面给你两种适配你代码结构的解决方案：

方案一：用回调Ref（适合你的类组件结构） #

这个方案不需要额外API，直接通过回调函数把组件实例存到你想要的地方：

1. 修改getRegPawn方法，支持传入Ref回调 #

getRegPawn(pawnType, storeRefCallback) {
  // 把回调ref传递给RegularPawn组件
  return <RegularPawn pawnType={pawnType} ref={storeRefCallback} />;
}

2. 在App构造函数里保存组件实例 #

constructor() {
  super();
  // 先初始化pawns数组，用来存组件实例（不是JSX）
  this.pawns = Array.from({ length: 4 }, () => []);
  
  // 给[3][2]位置预留位置，通过回调ref把实例存进去
  this.pawns[3][2] = null;
  this.getRegPawn(PAWN.BLUE, (pawnInstance) => {
    this.pawns[3][2] = pawnInstance;
  });

  // 注意：这里的debugger拿不到实例！组件实例要等到componentDidMount之后才会被赋值
}

3. 调用实例方法 #

等组件挂载完成后，你就可以直接调用方法了，比如在某个事件处理或生命周期里：

checkPawnMove() {
  const targetPawn = this.pawns[3][2];
  if (targetPawn) { // 先判断实例是否存在
    const canDoBasicMove = targetPawn.isBasicMove();
    const canDoStrikeMove = targetPawn.isStrikeMove();
    console.log('基础移动是否可行：', canDoBasicMove);
    console.log('攻击移动是否可行：', canDoStrikeMove);
  }
}

方案二：用createRef（React 16.3+推荐） #

如果你的React版本是16.3或以上，官方更推荐用createRefAPI：

1. 在App类里创建二维Ref数组 #

constructor() {
  super();
  // 创建一个二维数组存每个棋子的ref
  this.pawnRefs = Array.from({ length: 4 }, () => []);
  // 给[3][2]位置创建专属ref
  this.pawnRefs[3][2] = React.createRef();
}

2. 传递Ref给RegularPawn #

getRegPawn(pawnType, ref) {
  return <RegularPawn pawnType={pawnType} ref={ref} />;
}

// 构造函数里调用时传入ref
this.getRegPawn(PAWN.BLUE, this.pawnRefs[3][2]);

3. 调用实例方法 #

通过ref.current获取实例：

checkPawnMove() {
  const targetPawn = this.pawnRefs[3][2].current;
  if (targetPawn) {
    targetPawn.isBasicMove();
    targetPawn.isStrikeMove();
  }
}

关键注意点 #

• 组件实例只有在组件挂载完成后才会被赋值到ref里，所以在constructor、render里直接访问会拿到null，一定要在componentDidMount或者用户触发的事件（比如点击）里使用。
• 如果你以后改用函数组件，可以用useRef钩子实现类似逻辑，原理是一样的。

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