React用forwardRef获取组件实例？解决Chart.js截图ref为空问题

我尝试将Chart.js图表导出为PNG图片，使用了以下代码：

const DSampleChart = () => {
  let ref = useRef(null);

  const downloadImage = useCallback(() => {
    const link = document.createElement("a");
    link.download = "chart.png";
    link.href = ref.current.toBase64Image();
    link.click();
  }, []);

  return (
    <div>
      <button type="button" onClick={downloadImage}>
        Download
      </button>
      <div>
        <WbrChart ref={ref} data={chartonedata} />
      </div>
    </div>
  );
};

运行代码时出现toBase64Image()相关错误，推测是ref.current为空导致。控制台提示：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

我不熟悉forwardRef的用法，尝试修改后问题反而更严重。

解决步骤 #

问题核心是函数组件无法直接接收ref，必须通过React.forwardRef将ref转发到组件内部的Chart.js实例上。

1. 修改WbrChart组件，使用forwardRef

如果你的WbrChart是基于react-chartjs-2封装的组件，直接将ref转发给内部的Chart组件即可：

import { Chart } from 'react-chartjs-2';
import React, { forwardRef } from 'react';

const WbrChart = forwardRef((props, ref) => {
  return <Chart ref={ref} {...props} />;
});

export default WbrChart;

如果是自定义封装的Chart.js组件，需要确保ref指向Chart实例：

import React, { forwardRef, useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

const WbrChart = forwardRef(({ data }, ref) => {
  const canvasRef = useRef(null);
  const chartInstanceRef = useRef(null);

  useEffect(() => {
    if (canvasRef.current) {
      chartInstanceRef.current = new Chart(canvasRef.current, {
        type: 'bar', // 替换为你的图表类型
        data: data
      });
      // 将Chart实例挂载到传入的ref上
      if (ref) ref.current = chartInstanceRef.current;
    }

    return () => {
      if (chartInstanceRef.current) chartInstanceRef.current.destroy();
    };
  }, [data, ref]);

  return <canvas ref={canvasRef} />;
});

export default WbrChart;

2. 优化下载函数，增加空值判断

在downloadImage中先检查ref.current是否存在，避免触发空值报错：

const downloadImage = useCallback(() => {
  if (!ref.current) return;
  const link = document.createElement("a");
  link.download = "chart.png";
  link.href = ref.current.toBase64Image();
  link.click();
}, [ref]);

3. 确认DSampleChart的ref使用逻辑

原代码中ref的声明和传递方式无需修改，只要WbrChart正确转发ref，就能正常获取到Chart实例并调用toBase64Image()方法。

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