时间戳

首页 > 解决方案 > Particle.js 在 ReactJS 网站上不起作用

javascript - Particle.js 在 ReactJS 网站上不起作用

问题描述

我一直试图在我的投资组合网站上实现 Particles.js，但相当不成功。这些是我在库中运行以使其运行的以下代码行：

npm install tsparticles

npm install react-particles-js

我参考了https://www.geeksforgeeks.org/how-to-use-particles-js-in-react-project/和https://www.npmjs.com/package/react-particles-js并去了关于包括他们的代码，但我的页面上似乎没有出现任何内容。

这是我现在页面的图像：我的页面现在 看起来如何

这是我的页面代码：


import React, { useEffect } from 'react';
import Particles from 'react-particles-js';

const Index_body = () =>{
    return(
        <React.Fragment>
            <div className="index_body">
                <Particles
                    params={{
                        "particles": {
                            "number": {
                                "value": 50
                            },
                            "size": {
                                "value": 3
                            }
                        },
                        "interactivity": {
                            "events": {
                                "onhover": {
                                    "enable": true,
                                    "mode": "repulse"
                                }
                            }
                        }
                    }} 
                />
            </div>
        </React.Fragment>
    );
}

export default Index_body;

希望你们能帮帮我！谢谢！

标签： javascriptreactjsparticles.js

解决方案

在默认粒子中风颜色是白色因此我认为你看不到部分。所以尝试更改并查看包装组件背景颜色或部分笔划颜色。您可以使用以下代码更改粒子颜色

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#0030ff"
    },
    ...
}

推荐阅读