React组件中ref为空：react-chartjs-2的ref.current为null

我之前也踩过这个坑！你直接给react-chartjs-2的Line组件挂React.createRef()是拿不到底层图表实例的，原因在于这个组件是Chart.js的封装层，它不会把内部的canvas或Chart对象直接通过默认的ref暴露出来，得用它专门提供的属性才行。

问题根源 #

你当前的代码把ref绑定在了LineChart这个React组件上，拿到的this.chartRef.current其实是封装后的组件实例，不是你需要的Chart.js对象，甚至在组件初始化阶段可能还没完成内部图表的渲染，导致current为null。

解决方案：使用innerRef属性 #

react-chartjs-2为所有图表组件提供了innerRef属性，专门用来获取底层的Chart.js实例。只需要修改两点：

1. 在LineChart组件上用innerRef代替ref绑定你的ref对象
2. 直接通过ref.current获取Chart实例，不需要调用getContext('2d')

下面是修改后的完整代码：

import React, { Component } from 'react';
// 换成ES6解构导入更规范
import { Line as LineChart } from 'react-chartjs-2';

class App extends Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chartObject = null;
  }

  componentDidMount() {
    // 现在current就是初始化好的Chart.js实例
    this.chartObject = this.chartRef.current;
    // 加个判断避免初始化未完成的报错
    if (this.chartObject) {
      this.chartObject.update();
    }
  }

  render() {
    // 示例图表数据，替换成你自己的
    const chartData = {
      labels: ['一月', '二月', '三月'],
      datasets: [
        {
          label: '示例数据',
          data: [15, 25, 30],
          borderColor: '#2196F3',
          fill: false,
          tension: 0.1
        }
      ]
    };

    return (
      <div style={{ width: '80%', margin: '0 auto' }}>
        {/* 关键：用innerRef绑定你的ref */}
        <LineChart data={chartData} innerRef={this.chartRef} />
      </div>
    );
  }
}

export default App;

额外说明 #

• 导入方式改成ES6解构后代码更清晰，也符合React项目的通用规范
• 拿到Chart实例后，你可以直接调用Chart.js的所有API，比如update()、destroy()或者修改数据后重新渲染
• 加入if (this.chartObject)的判断是为了避免极端情况下图表还没初始化完成就调用方法导致的报错

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