使用React时如何设置react-particles-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;
}