粒子不会出现在 react-js 中答案

【问题标题】：Particles doesn't show up in react-js粒子不会出现在 react-js 中
【发布时间】：2022-12-10 12:18:42
【问题描述】：

这是我在 Particle.js 中的代码

import React from "react";
import Particles from "react-tsparticles";

function Particle() {
  return (
    <Particles
      id="tsparticles"
      params={{
        particles: {
          number: {
            value: 160,
            density: {
              enable: true,
              value_area: 1500,
            },
          },
          line_linked: {
            enable: false,
            opacity: 0.03,
          },
          move: {
            direction: "right",
            speed: 0.05,
          },
          size: {
            value: 1,
          },
          opacity: {
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.05,
            },
          },
        },
        interactivity: {
          events: {
            onclick: {
              enable: true,
              mode: "push",
            },
          },
          modes: {
            push: {
              particles_nb: 1,
            },
          },
        },
        retina_detect: true,
      }}
    />
  );
}

export default Particle;

我在 Home.js 中调用粒子

import Particle from "../Particle";
import Button from 'react-bootstrap/Button';

function Home() {

  return (
    <div className="mt-5">
        <Particle/>
        <Button href="" target="_blank" className="register-btn-inner" size="lg">
          Register
        </Button>   
      </div>
    );
  }
  
  export default Home;

我检查了很多相同的问题，比如particles.js not showing up in reactjs project和Particle.js not showing particles on ReactJS website 但解决方案根本帮不了我。我搜索了很多，但我不明白我的错误。为什么粒子不起作用？我也安装了 tsparticles 和 react-tsparticles 库。

【问题讨论】：

您能否编辑帖子以包含更完整的minimal reproducible example，足以让我们重现任何问题？你也可以尝试创建一个跑步codesandbox 重现问题供我们现场检查的演示？还请更详细地说明“粒子未出现”的确切含义。有错误吗？您是否检查过 DOM 以查看呈现的内容？安装包版本？等等。
您在控制台中看到任何错误了吗？如果你这样做了，请将它们附在问题上

标签： javascript reactjs particles particles.js

【解决方案1】：

您缺少 Particles 组件上的 init 属性。它在文档中也可见here

这是文档示例：

import { useCallback } from "react";
import Particles from "react-particles";
import { loadFull } from "tsparticles";

const App = () => {
    const particlesInit = useCallback(async engine => {
        console.log(engine);
        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async container => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
                background: {
                    color: {
                        value: "#0d47a1",
                    },
                },
                fpsLimit: 120,
                interactivity: {
                    events: {
                        onClick: {
                            enable: true,
                            mode: "push",
                        },
                        onHover: {
                            enable: true,
                            mode: "repulse",
                        },
                        resize: true,
                    },
                    modes: {
                        push: {
                            quantity: 4,
                        },
                        repulse: {
                            distance: 200,
                            duration: 0.4,
                        },
                    },
                },
                particles: {
                    color: {
                        value: "#ffffff",
                    },
                    links: {
                        color: "#ffffff",
                        distance: 150,
                        enable: true,
                        opacity: 0.5,
                        width: 1,
                    },
                    collisions: {
                        enable: true,
                    },
                    move: {
                        directions: "none",
                        enable: true,
                        outModes: {
                            default: "bounce",
                        },
                        random: false,
                        speed: 6,
                        straight: false,
                    },
                    number: {
                        density: {
                            enable: true,
                            area: 800,
                        },
                        value: 80,
                    },
                    opacity: {
                        value: 0.5,
                    },
                    shape: {
                        type: "circle",
                    },
                    size: {
                        value: { min: 1, max: 5 },
                    },
                },
                detectRetina: true,
            }}
        />
    );
};

【讨论】：