3

我正在学习 React 并且在将 React-Particles-Js ( 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”在屏幕的左上角显示了 3 次，并且在其下方显示了 Particles，这意味着 Particles 被解释为与 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;

这就是我看到 的在此处输入图像描述 如您所见，粒子和标签似乎被解释为互斥的。

（PS，我在我的 html.index 中设置了 body 标签以具有背景颜色#e74c3c，这是你看到的红色背景）

关于如何解决这个问题的任何建议？

4

2 回答 2

4

我对粒子使用相同的库，这是我的画布 css，它可以像你想要的那样工作：

#particle-canvas {
    position:fixed !important;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

它固定元素位置并将其设置在屏幕的左上角，在两个维度上都设置为 100%。

于 2019-03-11T12:31:17.187 回答
0

希望对你有帮助

import Particles from 'react-particles-js';
  class App extends Component {
  render() {
    return (
      <div className="App">

         <Particles className="particles"
         params={particlesOptions}/>
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          }}
        >
        <Header Data={Data}/>
      </div>
      </div>
    );
  }
}

export default App;
于 2020-02-16T13:08:03.697 回答