5

我已经设置好了所有东西，我只是不知道如何让 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 元素可见，而其余元素似乎根本不渲染。

编辑：这是粒子容器代码：

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;
4

6 回答 6

23

把你的整个包裹在<Router />里面<ParticlesContainer />是完全不合理的，因为你的容器没有渲染任何孩子。因此，无形的内容。

我搬进去<ParticlesContainer />了<Router />。之后它只是一个CSS问题。这是一个推荐的工作示例：https ://codesandbox.io/s/4k5z9xx0w 。（您可以根据自己的喜好调整样式）

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

export default ({ children }) => (
  <>
    <Particles />
    {children}
  </>
);
于 2018-12-04T01:15:10.560 回答
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;
}
于 2019-06-16T07:38:01.533 回答
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;
于 2019-10-20T08:26:52.933 回答
1

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 样式才能将粒子置于背景中。

于 2020-03-07T01:00:53.133 回答
1

也许你想尝试这样的事情。请记住添加 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;
}
于 2021-05-13T06:20:54.600 回答
0

希望这是对您有所帮助的示例：

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;
于 2019-05-09T08:47:37.287 回答