如何在React项目中使用particles.js.org导出的tsParticles JSON文件

首先确认你已经安装了正确的依赖包，大部分配置不生效的问题都是缺适配层或者插件导致的：

• 安装核心依赖，如果你导出的配置包含交互效果、特殊形状/粒子动效，直接安装全量包避免缺插件报错，执行命令：
  npm install @tsparticles/react @tsparticles/engine @tsparticles/full
  如果是yarn/pnpm用户换对应安装命令即可。

然后在组件中按正确逻辑初始化引擎、加载配置，不要直接把导入的JSON丢给组件就完事，参考可运行的写法：

import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadFull } from "@tsparticles/full";
// 替换成你自己导出的JSON配置文件的实际路径
import particlesConfig from "./path/to/your/exported-particles.json";

export default function ParticlesBg() {
  const [engineReady, setEngineReady] = useState(false);

  // 初始化粒子引擎，仅在组件挂载时执行一次
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      // 加载全量插件，匹配导出配置的所有效果依赖
      await loadFull(engine);
    }).then(() => {
      setEngineReady(true);
    });
  }, []);

  // 用useMemo缓存配置，避免重渲染导致粒子实例反复重载
  const particlesOptions = useMemo(() => particlesConfig, []);

  // 引擎初始化完成后再渲染粒子组件
  if (engineReady) {
    return <Particles id="tsparticles-root" options={particlesOptions} />;
  }

  return null;
}

几个高频踩坑点，对照排查就行：

• 不要传错props：本地导入的JSON配置要传给options属性，只有远程托管的配置文件才用url属性加载，传错属性会直接读不到配置。
• 不要随意修改导出的JSON结构：导出的配置是按tsParticles指定结构生成的，不要手动删除particles、background、interactivity这类顶层字段，否则会直接解析失败。
• 检查容器样式：很多时候配置已经生效，但粒子画布默认没有定位样式，宽高为0或者被其他元素遮挡看不到，给粒子容器加基础样式即可：

#tsparticles-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

• 版本匹配问题：如果你导出配置时选的tsParticles版本和你项目里安装的版本差了2个以上大版本，会存在字段不兼容的问题，重新导出对应版本的配置即可。
• 打开浏览器控制台排查：如果有明确的插件缺失报错，安装对应缺失的插件包就行，用全量包的话基本不会碰到这类问题。

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