React 16下通过DOM修改组件state的旧方法失效，如何修复？

问题背景 #

你之前用的FindReact函数依赖了React旧版本的内部实例结构，而React 16引入了全新的Fiber架构，彻底重构了内部节点的组织方式——原来的_currentElement、_owner这些内部属性要么被移除，要么路径完全改变，所以旧代码才会抛出Cannot read property '_owner' of undefined的错误。

修复后的解决方案 #

针对React 16及后续的React 17、18版本，我们需要调整获取组件实例的路径，下面是更新后的FindReact函数：

window.FindReact = function(dom) {
  // 定位React内部实例的标识键
  const reactInternalKey = Object.keys(dom).find(key => key.startsWith('__reactInternalInstance$'));
  if (!reactInternalKey) return null;

  const fiberNode = dom[reactInternalKey];
  
  // React 16+ 使用Fiber树结构，向上遍历找到对应组件实例
  let currentFiber = fiberNode;
  while (currentFiber && !currentFiber.stateNode) {
    currentFiber = currentFiber.return;
  }

  // stateNode即为类组件的实例对象
  return currentFiber ? currentFiber.stateNode : null;
};

// 使用示例
const someElement = $x("someElement")[0];
const targetComponent = window.FindReact(someElement);
if (targetComponent) {
  targetComponent.setState({ hover: true });
}

代码说明 #

1. 定位内部实例键：依然通过以__reactInternalInstance$开头的键获取内部节点，但React 16+的内部节点是Fiber对象。
2. 遍历Fiber树：Fiber节点的return属性指向父级Fiber节点，我们需要向上遍历直到找到带有stateNode的节点——这个stateNode就是对应的类组件实例。
3. 安全调用setState：先判断组件实例是否存在，避免因遍历失败导致的报错。

注意事项 #

• 这个方法依赖React的内部未公开API，官方随时可能修改内部结构，仅建议在调试、测试场景使用，生产环境绝对不要依赖这种方式。
• 该逻辑对React 18依然适用，但如果未来React再次调整内部架构，可能还需要同步更新。
• 函数组件没有实例对象，所以这个方法只能获取类组件的实例；如果要操作函数组件的状态，需要其他依赖内部API的方式，风险更高，不推荐。

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