Question

我正在学习React，并且在将React-Particles-J（https://www.npmjs.com/package/react-particles-js）设置为我的网站背景时遇到了一些问题。

如果我仅渲染

  class App extends Component {
  render() {
    return (
      <div>
      <Particles />
      </div>

    );
  }
}

我有了希望的背景。但是，只要我渲染了其他任何内容（例如h1标签），就不会在 react-particles-js上显示它，也就是说，它会移动react-particles-js并显示为单独显示。

例如，如果我渲染

 class App extends Component {
      render() {
        return (
          <div>
          <h1>Hello World</h1>
          <h1>Hello World</h1>
          <h1>Hello World</h1>
          <Particles />


          </div>


        );
      }
    }

    export default App;

发生的事情是，“ Hello World”在屏幕的左上角显示了三次，并且在其下方显示了“粒子”，这意味着“粒子”被解释为与h1在同一层上的另一个元素（好像是另一个h1标签），而不是作为所有元素基础的背景元素-无论它们是h1标签，卡片还是导航或其他任何元素-这就是我想要的！

这是我的Particles.js

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

var style = {
    width: "100vw",
    height: "100vh",
};


class ParticlesBackground extends Component {

    render() {
        return (
            <div style={style}>
            <Particles
                params={{
                    "particles": {
                    "number": {
                    "value": 90
                    },
                    "size": {
                    "value": 2.5
                    }
                },
                    "interactivity": {
                    "events": {
                    "onhover": {
                    "enable": true,
                    "mode": "repulse"
                    }
                    }
                    }
                }}/>
            </div>
            )
    }
}

export default ParticlesBackground;

这是我的App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Nav from './Nav'
import MainArea from './MainArea';
import Particles from './Particles';
import PeopleCard from './PeopleCard'





class App extends Component {
  render() {
    return (
      <div>
      <h1>Hello World</h1>
      <h1>Hello World</h1>
      <h1>Hello World</h1>
      <Particles />


      </div>


    );
  }
}

export default App;

这就是我所看到的 enter image description here 如您所见，粒子和标签似乎被解释为互斥的。

（PS，我在html.index中将body标签设置为背景颜色＃e74c3c，这是您看到的红色背景）

有关如何解决此问题的任何建议？

Answer 1

我对粒子使用相同的库，这是我的画布CSS，其工作原理与您想要的一样：

它固定元素的位置并将其设置在屏幕的最左上角，两个尺寸均设置为100％。

Answer 2

希望这对您有帮助

service: frontend
runtime: python37

handlers:
# Routing for bundles to serve directly
- url: /((?:(?:(?:inline|main|runtime|common|polyfills|styles|vendor)\.[a-z0-9]+\.js)|(?:[0-9]+\.[a-z0-9]+\.js)))
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.css)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Routing for typedoc, assets and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Any other requests are routed to index.html for angular to handle so we don't need hash URLs
- url: /.*
  secure: always
  redirect_http_response_code: 301
  static_files: dist/index.html
  upload: dist/index\.html
  expiration: 0s
  http_headers:
    Strict-Transport-Security: max-age=31536000; includeSubDomains
    X-Frame-Options: DENY

如何使用React将React-Particles-Js设置为背景？

2 个答案: