React tsParticles烟花预设功能无法正常运行，求React端正确使用方案

1. 安装依赖 #

需要安装3个核心包，避免依赖缺失导致效果异常：

npm install react-tsparticles tsparticles tsparticles-preset-fireworks

如果使用yarn：

yarn add react-tsparticles tsparticles tsparticles-preset-fireworks

2. 完整组件实现代码 #

以下是符合React标准规范的函数组件写法，已经解决仅底部显示效果的问题：

import { useCallback } from 'react'
import Particles from 'react-tsparticles'
import { loadFull } from 'tsparticles'
import { loadFireworksPreset } from 'tsparticles-preset-fireworks'

const FireworksEffect = () => {
  const particlesInit = useCallback(async (engine: any) => {
    // 加载粒子核心能力和烟花预设
    await loadFull(engine)
    await loadFireworksPreset(engine)
  }, [])

  return (
    <Particles
      id="fireworks"
      init={particlesInit}
      // 核心配置：指定使用烟花预设
      options={{
        preset: 'fireworks',
        // 可自定义调整的参数
        background: {
          color: '#000000' // 可设置为透明适配你的页面背景
        },
        fpsLimit: 60,
        emitters: {
          life: {
            count: 0 // 无限发射
          },
          rate: {
            delay: 0.5, // 烟花发射间隔，单位秒
            quantity: 2 // 每次发射数量
          }
        }
      }}
      // 重点：指定容器尺寸，避免默认高度不足导致仅底部显示效果
      style={{
        width: '100vw',
        height: '100vh',
        // 如果需要作为页面背景使用，添加以下样式即可
        // position: 'fixed',
        // top: 0,
        // left: 0,
        // zIndex: -1,
        // pointerEvents: 'none'
      }}
    />
  )
}

export default FireworksEffect

3. 常见问题说明 #

• 仅底部出现烟花效果的核心原因：默认粒子容器没有设置明确的宽高，仅能跟随内容撑开高度，手动指定容器宽高即可解决
• 如果不需要全屏效果，可以按照业务需求调整容器的宽高数值
• 可通过调整options内的参数自定义烟花的颜色、爆破范围、发射频率、数量等效果
• 组件可直接在页面内引入使用，不会影响其他业务逻辑的正常运行

内容的提问来源于stack exchange，提问作者Md. A. Apu