Particle.js没有在ReactJS网站上工作

Question

我一直试图在我的投资组合网站上实现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;

希望你们能帮我一把！谢谢!

Answer 1

在默认情况下，粒子笔画的颜色是白色的，我认为你看不到部分。因此，请尝试更改并查看包装组件背景色或部分笔画颜色。您可以通过以下代码更改粒子颜色

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

Answer 2

我遵循了这些步骤，这对我来说很有效：

我创建了一个新的react

npx create-react-app my-app

2-已安装的国家预防机制模块：

npm i react-tsparticles
npm i react-particles-js

3-复制此代码并将其粘贴到App.js文件中。

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

class App extends Component {
  render() {
    return (
      <div style={{ backgroundColor: '#333' }}>
        <Particles
          params={{
            particles: {
              number: {
                value: 50
              },
              size: {
                value: 3
              }
            },
            interactivity: {
              events: {
                onhover: {
                  enable: true,
                  mode: 'repulse'
                }
              }
            }
          }}
        />
      </div>
    );
  }
}

export default App;

我假设这是因为白色背景颜色或白色笔画/粒子颜色的阴影。

我用你的设置，我认为这绝对是背景色，这就是为什么你看不到任何粒子在浏览器上。

以下是Github链接：https://github.com/siddharth-sunchu/test-particles-lib

你可以克隆这个，做npm启动。