如何在使用react时将react粒子js设置为背景

Question

我已经设置好了一切，只是不知道如何让react particles js创建的元素充当背景。

这是我迄今为止的代码：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavTabs from "./components/NavTabs";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";
import ParticlesContainer from "./components/ParticlesContainer";

function App() {
return (
<ParticlesContainer>
<Router>
<div>
<NavTabs />
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
</ParticlesContainer>
);
}
export default App;

然而，没有任何内容显示；只有canvas元素可见，而其他元素似乎根本不呈现。

编辑：这是ParticleContainer代码：

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

class ParticlesContainer extends Component {
render() {
return ( 
<Particles 
params={{
"particles": {
"number": {
"value": 150,
"density": {
"enable": true,
"value_area": 1803.4120608655228
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 2,
"color": "#000000"
},
"polygon": {
"nb_sides": 4
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.4008530152163807,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 1.5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 0,
"color": "#ffffff",
"opacity": 0.3687847739990702,
"width": 0.6413648243462091
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "bubble"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 100,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}} />
)
}
}
export default ParticlesContainer;

Answer 1

将整个<Router />封装在<ParticlesContainer />中是完全不合理的，因为您的容器没有呈现任何子级。因此产生了看不见的内容。

我把<ParticlesContainer />移到了<Router />里面。在那之后，它只是一个CSS问题。以下是一个推荐的工作示例：https://codesandbox.io/s/4k5z9xx0w.(你可以根据自己的喜好调整风格(

作为替代方案，您可以显式地渲染子对象，但这是不必要的。

export default ({ children }) => (
<>
<Particles />
{children}
</>
);

Answer 2

您可以为元素指定一个类名，并使用它来定义一个绝对位置，也许您想让它变得重要，然后像下一个示例中那样选择画布的高度和宽度

import Particles from 'react-particles-js'
class App extends Component{ 
render(){
return (
<Particles 
canvasClassName="example"
height="120px"
width="300px"
params={{
polygon: {
enable: true,
type: 'inside',
move: {
radius: 10
},
url: 'path/to/svg.svg'
}
}} />
);
};
}

在您的CSS 中

.example{
position:absolute !important;
}

Answer 3

希望这将帮助您

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;

Answer 4

Miguel的回答很好，但它增加了我的内存使用量；当在列表中的元素上使用粒子时，我基本上不可能在画布绝对的情况下滚动页面。

对我来说效果很好的是将粒子元素放入一个绝对定位的中

<div style={{position: 'relative'}}>
<div style={{position: 'absolute'}}>
<Particles
params={{
particles: {
number: {
value: 50,
},
size: {
value: 3,
},
},
}}
/>
</div>
<div>
My actual content
</div>
<div>

您可能需要使用z索引样式来将粒子置于背景中。

Answer 5

也许你想试试这样的东西。记住添加className，这样您就可以在CSS 中应用样式

import Particles from 'react-particles-js';
function App() {
return (
<div className="App">
<OtherComponents/>
<OtherComponents/>
<Particles className="particles"
params={particlesOptions}/>


</div>
);
}
}
export default App;

这会出现在你的CSS文件中

.particles{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}

Answer 6

希望这是一个能帮助你的例子：

import React, { Component } from 'react';
import Particles from 'react-particles-js';
class DummyComponent extends Component {
render() {
return (
<Particles
params={{
"particles": {
"line_linked": {
"color":"#FFFFFF"
},
"number": {
"value": 150
},
"size": {
"value": 5
}
},
"interactivity": {
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
}
}
}
}}
style={{
width: '100%',
background: `#000000` 
}}
/>
)}
}
export default DummyComponent;