React中@tsparticles/react粒子Hover效果无法激活的求助

我在React项目里用@tsparticles/react集成粒子效果，其他功能都正常，唯独hover效果没反应。已经在options里配置了hover交互，排查过CSS样式没发现干扰，用的也是@tsparticles/react和tsparticles-slim的最新版。下面是我的简化代码：

import Particles from "react-tsparticles";
import { loadSlim } from "tsparticles-slim";
import { useCallback, useMemo, useState } from "react";

const ParticlesComponent = (props) => {
  const [animation, setAnimation] = useState(true);

  const options = useMemo(() => ({
    particles: {
      number: {
        value: 140,
        limit: 140,
        density: {
          enable: true,
          value_area: 800,
        },
      },
      color: {
        value: "#fff",
      },
      background: {
        color: "#000",
      },
      fullScreen: {
        enable: true,
        zIndex: -1,
      },
      interactivity: {
        events: {
          onHover: {
            enable: true,
            mode: 'repulse',
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
      },
      links: {
        enable: true,
        distance: 200,
      },
      move: {
        enable: true,
        speed: { min: 1, max: 5 },
      },
      opacity: {
        value: { min: 0.3, max: 0.7 },
      },
      size: {
        value: { min: 1, max: 3 },
      },
    },
  }), []);

  const particlesInit = useCallback((engine) => {
    loadSlim(engine);
  }, []);

  const toggleAnimation = () => setAnimation(!animation);

  return (
    <div style={{ position: "relative" }}>
      <Particles id={props.id} init={particlesInit} options={options} />
      <button onClick={toggleAnimation}> Toggle Animation </button>
    </div>
  );
};

export default ParticlesComponent;

问题原因及解决方法 #

• 核心问题：配置层级错误
  你把interactivity、background、fullScreen这些顶级配置项放在了particles对象内部，不符合tsparticles的配置规范，导致hover交互的配置没有被引擎识别。

• 修正后的配置要点：

  1. 将interactivity、background、fullScreen移到和particles同级的位置
  2. 显式添加interactivity.detectsOn: "canvas"，确保画布能正确捕获鼠标事件

修正后的完整代码 #

import Particles from "react-tsparticles";
import { loadSlim } from "tsparticles-slim";
import { useCallback, useMemo, useState } from "react";

const ParticlesComponent = (props) => {
  const [animation, setAnimation] = useState(true);

  const options = useMemo(() => ({
    particles: {
      number: {
        value: 140,
        limit: 140,
        density: {
          enable: true,
          value_area: 800,
        },
      },
      color: {
        value: "#fff",
      },
      links: {
        enable: true,
        distance: 200,
      },
      move: {
        enable: true,
        speed: { min: 1, max: 5 },
      },
      opacity: {
        value: { min: 0.3, max: 0.7 },
      },
      size: {
        value: { min: 1, max: 3 },
      },
    },
    // 修正：interactivity为顶级配置项
    interactivity: {
      detectsOn: "canvas",
      events: {
        onHover: {
          enable: true,
          mode: 'repulse',
          repulse: {
            distance: 200,
            duration: 0.4,
          },
        },
      },
    },
    // 修正：background为顶级配置项
    background: {
      color: "#000",
    },
    // 修正：fullScreen为顶级配置项
    fullScreen: {
      enable: true,
      zIndex: -1,
    },
  }), []);

  const particlesInit = useCallback((engine) => {
    loadSlim(engine);
  }, []);

  const toggleAnimation = () => setAnimation(!animation);

  return (
    <div style={{ position: "relative" }}>
      <Particles id={props.id} init={particlesInit} options={options} />
      <button onClick={toggleAnimation}> Toggle Animation </button>
    </div>
  );
};

export default ParticlesComponent;

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