Reactの使用中にreact-particles-jsを背景として設定するにはどうすればよいですか？
私はすでにすべてをセットアップしましたが、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;
ただし、どのコンテンツも表示されません。キャンバス要素のみが表示され、残りはまったくレンダリングされていないようです。
編集：これが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;
これがお役に立てば幸いです
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;
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-indexスタイリングをいじる必要があるかもしれません。
希望これはあなたを助ける例です：
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;