如何在React.js中正确集成nextparticle粒子效果JS库并解决运行报错

核心问题说明 #

nextparticle是原生JavaScript库，未提供React组件版本，此前将其作为React组件直接调用的写法不符合库的使用规范，正确实现方案如下：

实现步骤 #

1. 保留你在index.html中添加的全局引入配置，无需在组件内再次import该库，库会自动挂载到window全局对象上，可避免导入导出不匹配报错。
2. 在React组件内等待DOM渲染完成后，再初始化粒子实例，示例代码如下：

import React, { useRef, useEffect } from 'react';

const ParticleBackground = () => {
  // 存储原始图片DOM引用
  const logoRef = useRef(null);
  // 存储粒子实例，避免重复初始化
  const particleInstanceRef = useRef(null);

  useEffect(() => {
    // 等待全局库和DOM加载完成再执行初始化
    if (!window.NextParticle || !logoRef.current) return;

    // 按原生用法初始化粒子实例
    particleInstanceRef.current = new window.NextParticle({
      image: logoRef.current,
      addTimestamp: true,
      width: window.innerWidth,
      height: window.innerHeight,
      initPosition: 'none',
      initDirection: 'none',
    });

    // 窗口大小变化监听逻辑
    const handleResize = () => {
      if (window.innerWidth > 600 && particleInstanceRef.current) {
        particleInstanceRef.current.width = window.innerWidth - 20;
        particleInstanceRef.current.height = window.innerHeight - 20;
        particleInstanceRef.current.start();
      }
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时清理事件和实例，避免内存泄漏
    return () => {
      window.removeEventListener('resize', handleResize);
      particleInstanceRef.current = null;
    };
  }, []);

  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
      {/* 原始图片设为隐藏，库会读取图片内容生成粒子效果 */}
      <img
        ref={logoRef}
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle.png"
        style={{ display: 'none' }}
        alt="粒子素材"
      />
    </div>
  );
};

export default ParticleBackground;

注意事项 #

如果出现window.NextParticle未定义的报错，可将index.html中的引入标签替换为官方CDN地址并添加defer属性：

<script src="https://nextparticle.nextco.de/nextparticle.min.js" defer></script>

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