TSX项目中Chart.js词云组件莫名移动问题求助

核心问题排查 #

1. 重复Canvas元素：代码中渲染了两个<canvas>，一个通过ref引用，另一个通过id，多余元素会干扰Chart的尺寸计算逻辑，引发不必要的重绘。
2. Canvas尺寸未固定：Tailwind的max-h-10/max-w-10是最大尺寸限制而非固定值，Chart.js初始化时需要明确的canvas宽高，若容器因布局重排动态变化尺寸，会触发词云重新布局，导致“移动”现象。
3. Chart实例未用useRef存储：组件级的let chart:any在React严格模式（调试模式默认开启）下会因组件两次挂载丢失旧实例，if (chart) chart.destroy()逻辑失效，可能导致重复渲染。
4. 未处理尺寸初始化时机：Canvas初始化时可能未获取到最终容器尺寸，后续尺寸确定后触发Chart重排，造成视觉上的“移动”。

修复步骤 #

1. 移除多余Canvas：仅保留一个通过ref绑定的canvas元素。
2. 固定容器与Canvas尺寸：给容器设置明确宽高，让canvas铺满容器，同时通过代码同步Canvas的绘制尺寸（避免模糊和尺寸波动）。
3. 用useRef存储Chart实例：确保组件重新渲染时能正确访问和销毁旧实例，避免内存泄漏和重复渲染。
4. 禁用自动响应式调整：关闭Chart.js的responsive选项，避免自动监听容器尺寸变化引发的意外重排。

修改后的代码 #

import React, { useEffect, useRef } from 'react';
import { WordCloudChart } from 'chartjs-chart-wordcloud';
import { Chart, registerables } from 'chart.js';

// 全局注册一次Chart.js组件，避免重复注册
Chart.register(...registerables);

export const WordCloud: React.FunctionComponent = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const chartRef = useRef<any>(null); // 用useRef持久化Chart实例

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // 销毁旧实例，避免重复渲染
    if (chartRef.current) {
      chartRef.current.destroy();
    }

    // 同步Canvas绘制尺寸与容器尺寸，避免模糊和尺寸波动
    const container = canvas.parentElement;
    if (container) {
      const { width, height } = container.getBoundingClientRect();
      canvas.width = width;
      canvas.height = height;
    }

    const ctx = canvas.getContext("2d", { willReadFrequently: true });
    if (!ctx) return;

    chartRef.current = new WordCloudChart(ctx, {
      data: {
        labels: ['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'],
        datasets: [
          {
            label: 'DS',
            data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
          },
        ],
      },
      options: {
        // 禁用自动响应式，避免容器尺寸变化触发意外重排
        responsive: false,
        maintainAspectRatio: false,
      },
    });

    // 组件卸载时销毁Chart实例
    return () => {
      if (chartRef.current) {
        chartRef.current.destroy();
      }
    };
  }, []);

  return (
    <div className='w-10 h-10'> {/* 固定容器尺寸 */}
      <canvas 
        ref={canvasRef} 
        className='w-full h-full' {/* 让canvas铺满容器 */}
      ></canvas>
      <p>Ja du</p>
    </div>
  );
};

额外说明 #

• 若需要响应式尺寸，可开启responsive: true，并添加resize事件监听，在容器尺寸变化时重新设置Canvas宽高并调用chartRef.current.update()。
• 调试模式下React严格模式会触发两次挂载，useRef存储的实例能确保销毁逻辑正常执行，避免重复渲染问题。

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