React中使用canvas-confetti包实现彩屑动画报错求助

你遇到的核心问题是DOM获取时机错误：在组件还未渲染出<canvas>元素时，就调用了document.querySelector(".confetti")，此时DOM中不存在该元素，返回null，传入confetti.create后触发报错。

修复方案 #

使用React提供的useRef和useEffect来正确处理DOM元素的获取与初始化时机，这是React中操作DOM的标准方式：

import { useRef, useEffect } from "react";
import confetti from "canvas-confetti";

function ConfettiComponent() {
  // 创建ref绑定到canvas元素
  const canvasRef = useRef(null);

  // 组件挂载后执行confetti初始化
  useEffect(() => {
    // 确保canvas元素已存在
    if (!canvasRef.current) return;

    try {
      const myConfetti = confetti.create(canvasRef.current, {
        resize: true,
        useWorker: true,
      });

      myConfetti({
        particleCount: 100,
        spread: 160,
      });
    } catch (error) {
      console.error("彩屑动画初始化失败:", error);
    }
  }, []); // 空依赖数组确保只执行一次

  return (
    <div className="counter">
      {/* 将ref绑定到canvas */}
      <canvas ref={canvasRef} className="confetti" />
    </div>
  );
}

export default ConfettiComponent;

关键修改说明 #

• useRef替代document.querySelector：通过React的ref系统直接关联DOM元素，避免手动查询DOM带来的时机问题。
• useEffect控制执行时机：空依赖的useEffect会在组件挂载完成（DOM渲染完毕）后执行，此时canvas元素已存在，可安全初始化confetti。
• 空值校验：增加if (!canvasRef.current)判断，避免极端情况下的空值调用报错。

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