如何访问被React Hot Loader包裹的React组件？

别担心，要访问被React Hot Loader（HMR）包裹的组件实例其实很简单，核心还是用React的ref特性——HMR的高阶组件会自动把ref转发给原始的组件类，不会阻碍你获取实例。

先看你的现有代码，我们一步步修改：

首先是你的UI组件（保持HOC导出不变）：

import { Component } from 'react';
import { hot } from 'react-hot-loader';

class UI extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { message: "" };
  }
  displayMessage() {
    this.setState({ message: "Hello World!" });
  }
  render() {
    return ( <div> { this.state.message } </div> );
  }
}
export default hot(module)(UI);

然后修改你的App代码，通过ref获取组件实例：

import React, { render, createRef } from 'react';
import UI from './UI';

class App {
  constructor() {
    this.uiRef = createRef(); // 创建ref容器
    this.loadUI();
  }
  loadUI() {
    // 渲染时把ref绑定到UI组件
    this.ui = render( <UI ref={this.uiRef} />, document.getElementById('app-root') );
  }
  // 比如新增一个方法来调用UI组件的方法
  triggerMessage() {
    // 通过ref.current获取到原始的UI组件实例
    if (this.uiRef.current) {
      this.uiRef.current.displayMessage();
    }
  }
}

如果你的项目用的是React 16.3之前的版本，不支持createRef，可以改用回调ref的方式：

class App {
  constructor() {
    this.uiInstance = null; // 存储实例的变量
    this.loadUI();
  }
  loadUI() {
    this.ui = render( 
      <UI ref={(ref) => { this.uiInstance = ref; }} />, 
      document.getElementById('app-root') 
    );
  }
  triggerMessage() {
    if (this.uiInstance) {
      this.uiInstance.displayMessage();
    }
  }
}

原理很简单：hot(module)(UI)返回的是一个高阶组件，但它会正确转发ref到内部的UI类实例，所以你通过ref拿到的就是你定义的UI组件本身，完全可以调用它的方法或者访问状态。

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