如何在Chrome开发者控制台获取React组件引用并触发重渲染？

你遇到的问题其实很常见——Webpack打包后变量都被封装在模块作用域里，全局访问不到foo或者ReactDOM，所以直接在控制台调用会报错。下面给你几个可行的方案，从临时快速方案到更规范的调试思路都有：

一、快速临时方案（你的思路优化版） #

你在组件构造函数里把实例挂到window上的方法完全可行，还能写得更简洁：

class Hello extends React.Component {
  constructor(props) {
    super(props);
    // 将组件实例挂载到全局window对象
    window.helloComponent = this;
  }

  // 组件其他逻辑...
}

之后在Chrome控制台直接输入window.helloComponent.forceUpdate()就能触发组件重新渲染。这个方法适合本地调试，记得上线前要删掉这段代码，避免全局变量污染。

二、用React DevTools直接获取实例（最推荐） #

React官方开发者工具能直接帮你拿到组件实例，不用改任何代码：

1. 确保安装了React DevTools Chrome扩展
2. 打开控制台切换到Components标签
3. 在组件树里找到你的Hello组件并选中
4. 在控制台输入$r，这个变量就代表当前选中的组件实例
5. 直接调用$r.forceUpdate()就能强制重新渲染

这是日常调试React组件的首选方式，完全依赖工具能力，不需要侵入代码。

三、通过DOM元素反向获取组件实例 #

开发模式下，React会把组件实例关联到对应的DOM元素上，你可以通过内部属性拿到它：

// 先获取组件挂载的DOM元素
const domElement = document.getElementById('my-div');
// 开发模式下React会给DOM元素添加内部关联属性
const componentInstance = domElement._reactRootContainer._internalRoot.current.child;
// 调用强制更新
componentInstance.forceUpdate();

注意：这个方法依赖React内部实现，不同版本属性名可能变化，生产环境下内部属性会被压缩，只适合临时调试用。

四、规范的全局暴露（适合长期调试场景） #

如果需要在开发环境稳定访问组件实例，可以在渲染时针对性暴露：

document.addEventListener("DOMContentLoaded", e => {
  const helloInstance = ReactDOM.render(<Hello name="React" />, document.getElementById('my-div'));
  // 仅在开发环境暴露全局变量
  if (process.env.NODE_ENV === 'development') {
    window.helloInstance = helloInstance;
  }
});

开发环境下控制台输入helloInstance.forceUpdate()即可生效，生产环境不会创建这个全局变量，避免污染。

内容的提问来源于stack exchange，提问作者american-ninja-warrior