使用 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;

但是，none的内容显示；只有 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 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;

Answer 3

您可以为元素指定一个 class 名称并用它来定义一个绝对位置，也许您想让它变得重要，然后选择 canvas 的高度和宽度就像下一个例子

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 4

希望对您有所帮助

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 5

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

对我来说效果很好的是将粒子元素放在绝对定位的内部：

<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 样式来使粒子进入背景。

Answer 6

也许您想尝试这样的事情。请记住添加类名，以便您可以在 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;
}

使用 React 时如何设置 react-particles-js 为背景？

How can I set react-particles-js as the background while using React?

reactjs

particles.js