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;

但是，没有内容显示；仅画布元素可见，而其余元素似乎根本不呈现。

编辑：这是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 (
      <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 3

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

对我来说最有效的方法是将粒子元素放在绝对定位的内部：

<UserJourneys>
  <UserJourney>
    <OrchestrationSteps>
      <OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">

您可能必须尝试使用z-index样式才能使粒子进入背景。

Answer 4

希望这是可以帮助您的示例：

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 5

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

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 6

也许你想尝试这样的事情。请记住添加 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;
}

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

6 个答案: