如何使用我从 https://particles.js.org/ 导出的 tsparticles json 文件答案

【问题标题】：how to use tsparticles json file that i export from https://particles.js.org/如何使用我从 https://particles.js.org/ 导出的 tsparticles json 文件
【发布时间】：2022-12-25 14:46:05
【问题描述】：

基本上，我将尝试在我从https://particles.js.org/ 导出的反应项目中使用 tsparticles JSON 文件。但它没有用。

【问题讨论】：

请阐明您的具体问题或提供更多详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript reactjs

【解决方案1】：

我在我的项目中使用了粒子 js。在我的项目中，我制作了一个单独的组件，并在主组件中调用了这个组件，比如 App.js

我已经将 JSON 文件作为 API。如果你想把JSON文件做成一个API或者你也可以直接调用这个API。

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
const ParticleAnimation = () => {
  const particlesInit = async (main) => {
    console.log(main);
    await loadFull(main);
  };

  const particlesLoaded = (container) => {
    console.log(container);
  };
  return (
    <div>
      <Particles
        id="tsparticles"
        url={YOUR_JSON_FILE_LINK_HERE}
        init={particlesInit}
        loaded={particlesLoaded}
      />
    </div>
  );
};

export default ParticleAnimation;

【讨论】：