React组件中addEventListener回调无法获取refs问题求助

我来帮你排查这个问题，主要有几个关键点导致你在事件回调里拿不到ref：

1. 字符串Ref的局限性 #

你现在用的是字符串ref（ref="highChart"），这种方式已经被React官方废弃了，它在异步操作或者组件重新渲染后可能会出现引用丢失的情况，尤其是在事件回调这类异步场景下，可靠性很差。

2. 事件绑定的时机与函数绑定问题 #

• 你在componentWillMount里绑定事件，但这个生命周期钩子在React 16.3+已经被标记为不安全，而且此时组件还未挂载。更关键的是，每次调用bind(this)都会生成一个新的函数，导致removeEventListener根本无法移除之前的监听（因为函数引用不一样），可能存在多个冗余监听，当组件状态变化时，旧的监听回调里的ref已经失效。
• 另外，componentWillMount里执行this.setState(this.props)是没必要的，直接使用this.props即可，强行同步state反而可能触发不必要的重渲染，干扰ref的正常赋值。

3. 正确的实现方式 #

步骤1：替换为createRef（推荐，React 16.3+） #

先在组件类里创建ref实例：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.highChartRef = React.createRef();
    // 提前绑定回调函数，避免每次渲染创建新函数
    this.onReactGridItemResize = this.onReactGridItemResize.bind(this);
  }

  // ...
}

然后在render里使用这个ref：

<div className="chart pull-right">
  <ReactHighcharts ref={this.highChartRef} config={chartConfig}/>
</div>

步骤2：调整事件监听的生命周期 #

把事件监听的添加和移除移到componentDidMount和componentWillUnmount，确保组件挂载后再绑定，并且移除时用同一个函数引用：

componentDidMount() {
  window.addEventListener("ReactGridItemResize", this.onReactGridItemResize, false);
}

componentWillUnmount() {
  window.removeEventListener("ReactGridItemResize", this.onReactGridItemResize, false);
}

步骤3：修改回调函数的ref访问方式 #

现在通过current属性访问ref指向的组件实例：

onReactGridItemResize() {
  // 先判断ref是否存在，避免报错
  if (this.highChartRef.current) {
    this.highChartRef.current.chart.reflow();
  }
}

额外优化建议 #

• 如果你不想在构造函数里绑定函数，可以用类箭头函数的方式定义回调，自动绑定this：

onReactGridItemResize = () => {
  if (this.highChartRef.current) {
    this.highChartRef.current.chart.reflow();
  }
}

这样就不需要在构造函数里手动bind(this)了。

• 移除componentWillMount里的setState和监听代码，这个钩子现在已经不推荐使用，改用constructor初始化状态（如果需要的话），或者直接使用props。

按照上面的方式修改后，应该就能在事件回调里正常访问到HighCharts的实例了。

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