Javascript 如何使用React将React粒子设置为背景？

我正在学习React，在设置React粒子Js（）作为我网站的背景时遇到了一些问题

如果我只提供

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

    );
  }
}

类应用程序扩展组件{
render（）{
返回(
);
}
}

我得到了我想要的背景。但是，只要我渲染任何其他内容（例如h1标记），它就不会显示在react粒子js上，可以这么说，而是移动react粒子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;

类应用程序扩展组件{
render（）{
返回(
你好，世界
你好，世界
你好，世界
);
}
}
导出默认应用程序；

发生的情况是，“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;

import React，{Component}来自'React'；
从“react Particles js”导入粒子；
变量样式={
宽度：“100vw”，
高度：“100vh”，
};
类ParticlesBackground扩展组件{
render（）{
返回(
)
}
}
导出默认分词背景；

这是我的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;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./Nav”导入导航
从“/MainArea”导入MainArea；
从“./Particles”导入粒子；
从“/PeopleCard”导入PeopleCard
类应用程序扩展组件{
render（）{
返回(
你好，世界
你好，世界
你好，世界
);
}
}
导出默认应用程序；

这就是我所看到的 如您所见，粒子和标记似乎被解释为相互排斥

（另外，我在html.index中设置了body标记，使其具有背景色#e74c3c，即您看到的红色作为背景色）

---

有没有关于我如何解决这个问题的建议

我对粒子使用相同的库，下面是我的画布css，它的工作方式与您所希望的一样：

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

---

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

希望这对您有所帮助

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;

从“react Particles js”导入粒子；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；