particle.js 没有出现在 reactjs 项目中 [英] particles.js not showing up in reactjs project

问题描述

我最近了解了 Particle.js，并想在我的 Reactjs 应用程序中使用它.

I recently got to know about Particle.js and wanted to use it on my Reactjs application.

我使用下面提到的命令安装了它:-

I installed it using the command mentioned just below:-

npm install react-particles-js

并且安装成功.我在 node-modules 文件夹中检查了它，发现它已正确安装.

And it got installed successfully. I checked it in node-modules folder and found it that it has installed properly.

现在，App.js 来了

Now, comes the App.js

import React from 'react';
import Navigation from './components/Navigation'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import * as ROUTES from './constants/routes'
import Landing from './components/Landing'
import Home from './components/Home'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import PasswordForget from './components/PasswordForget';
import Particles from 'react-particles-js';
function App() {
  return (
    <div className="App">
      <Router>
        <Particles></Particles>
         <Navigation />
         <Route exact path={ROUTES.HOME} component={Home} />
         <Route path={ROUTES.SIGN_IN} component={SignIn} />
         <Route path={ROUTES.SIGN_UP} component={SignUp} />
         <Route path={ROUTES.LANDING} component={Landing} />
         <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForget} />
      </Router>
    </div>
  );
}

export default App;

这里是输出的样子

另外，我希望 Particles-js 像适当的背景一样工作.因此，它也包含在登录、注册和家庭组件中.

Also, I want the Particles-js to work like a proper background. So, that it comes in Sign-in, sign-up, and home components too.

请帮助我.我尝试在里面添加参数，它仍然不起作用.

Please help me. I tried adding parameters inside and it still didn't work.

推荐答案

我猜你的页面是白色的，粒子系统默认也是白色的.我在代码盒中对此进行了测试，果然在我更改了它们所在容器的背景颜色之前它们是不可见的.您可以将配置道具传递给组件.这是一个简单的演示，粒子和链接改为黑色.

My guess is your page is white, and the particle system is also white by default. I tested this in a codesandbox and sure enough they weren't visible until I changed the background color of the container they were in. You can pass configuration props to the component. Here's a simple demo with the particles and links colored black instead.

<Particles
  params={{
    particles: {
      color: {
        value: "#000000"
      },
      line_linked: {
        color: {
          value: "#000000"
        }
      },
      number: {
        value: 50
      },
      size: {
        value: 3
      }
    }
  }}
/>

自述文件有一个链接到一个不错的 配置 页面，允许您将当前配置导出为 JSON文件.很方便！

The README has a link to a nice configuration page that allows you to export the current config as a JSON file. Very handy!

编辑要制作页面背景，添加一些绝对定位并设置一些高度和宽度(更新沙箱！):

Edit To make background of page, add some absolute positioning and set some height and width (above sandbox updated!):

<Particles
  style={{ position: "absolute" }}
  height="95%"
  width="95%"
  params={{
    particles: {
      color: {
        value: "#000000"
      },
      line_linked: {
        color: {
          value: "#000000"
        }
      },
      number: {
        value: 50
      },
      size: {
        value: 3
      }
    }
  }}
/>

这篇关于particle.js 没有出现在 reactjs 项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！