particles.js没有出现在reactjs项目中

Question

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

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

npm install react-particles-js

它安装成功了。我在节点模块文件夹中检查了它，发现它已经正确安装了。

现在，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;

下面是输出的样子

另外，我希望粒子-js工作像一个适当的背景。因此，它也包括登录、注册和家庭组件。

请帮帮我。我试着在里面添加参数，但仍然没有起作用。

Answer 1

我猜你的页面是白色的，粒子系统也是白色的。我在一个代码框中测试了这一点，确定在更改它们所在的容器的背景色之前，它们是不可见的。您可以将配置道具传递给组件。这里是一个简单的演示与粒子和链接彩色黑色代替。

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

​

​

过时了

自述文件有一个指向一个很好的配置页面的链接，该页面允许您将当前配置导出为JSON文件。非常方便！

更新

以前的配置页现在似乎无法访问。下面是一个更新的文档页面。

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

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

Answer 2

我上了一门在线课程，我们用这个包，但它不起作用。为了工作，我必须去文档，并更改我下载的包的版本。

npx install react-particles-js@2.4.0-beta.2 --force

玩得开心:)

Answer 3

@Neha Chaudhary :您可以在css中创建.particles类链接，并使用z-index:-1。

.particles{
z-index: -1;
}