Particle.js 在 ReactJS 网站上不起作用答案

【问题标题】：Particle.js not working on ReactJS websiteParticle.js 在 ReactJS 网站上不起作用
【发布时间】：2021-07-16 03:21:20
【问题描述】：

我一直在尝试在我的投资组合网站上实现 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 并在他们进行操作时包含了他们的代码，但我的页面上似乎没有出现任何内容。

这是我现在页面的图片： How my page looks right now

这是我的页面代码：


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;

希望大家能帮帮我！谢谢！

【问题讨论】：

您的浏览器开发工具控制台中是否有任何错误？你在哪里/如何使用Index_body？
我的开发工具控制台中没有错误。我将<Index_body /> 调用到具有函数<Index /> 的页面文件中。然后我在我的App.js 中使用<Router /> 调用相同的函数

标签： javascript reactjs particles.js

【解决方案1】：

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

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

【讨论】：

所以我尝试像这样添加颜色参数：`“color”：{“value”：#000000}，`仍然不成功。它给我一个错误说：哈希令牌后出现意外数字。
检查提到的代码将#000000更改为“#000000”（它是字符串）
是的，它必须是字符串。谢谢！

【解决方案2】：

我遵循了这些步骤，它对我有用：

1 - 我创建了一个新的 react 应用

npx create-react-app my-app

2 - 安装的 npm 模块：

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 start。

【讨论】：