Question

我一直在尝试将ParticleJS渲染为我的create-react-app的根div的背景，我最初已成功加载，但是当更改路线然后再次访问主页时，particlejs就消失了。以下是我的配置，请告诉我是否有遗漏的内容。

import React, { Component } from 'react';
import { Portal } from 'react-portal';
import Particles from 'react-particles-js';

class Particle extends Component {
  render() {
    return (
      <Portal node={document && document.getElementById('root')}>
        <div id="particles">
          <Particles
            params={{
                    particles: {
                      number: {
                        value: 20,
                        density: {
                          enable: true,
                          value_area: 800
                        }
                      },
                      color: {
                        value: "#ffffff"
                      },
                      shape: {
                        type: "circle",
                        stroke: {
                          width: 0,
                          color: "#000000"
                          },
                      },
                      "polygon": {
                        "nb_sides": 5
                      },
                      "image": {
                        "src": "",
                        "width": 100,
                        "height": 100
                      },
                      "opacity": {
                        "value": 0.6,
                        "random": false,
                        "anim": {
                          "enable": false,
                          "speed": 1,
                          "opacity_min": 0.5,
                          "sync": false
                        }
                      },
                      "size": {
                        "value": 3,
                        "random": true,
                        "anim": {
                          "enable": false,
                          "speed": 40,
                          "size_min": 0.1,
                          "sync": false
                        }
                      },
                      "line_linked": {
                        "enable": true,
                        "distance": 150,
                        "color": "#FFFFFF",
                        "opacity": 0.6,
                        "width": 1
                      },
                      "move": {
                        "enable": true,
                        "speed": 4,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false,
                        "attract": {
                          "enable": false,
                          "rotateX": 600,
                          "rotateY": 1200
                        }
                      },
                      "interactivity": {
                      "detect_on": "canvas",
                      "events": {
                        "onhover": {
                          "enable": true,
                          "mode": "repulse"
                        },
                        "onclick": {
                          "enable": true,
                          "mode": "push"
                        },
                        "resize": true
                      },
                      "modes": {
                        "grab": {
                          "distance": 400,
                          "line_linked": {
                            "opacity": .6
                          }
                        },
                        "bubble": {
                          "distance": 400,
                          "size": 40,
                          "duration": 2,
                          "opacity": 8,
                          "speed": 3
                        },
                        "repulse": {
                          "distance": 200,
                          "duration": 0.4
                        },
                        "push": {
                          "particles_nb": 4
                        },
                        "remove": {
                          "particles_nb": 2
                        }
                      }
                    },
                    "retina_detect": true
                  }
            }} />
          </div>
        </Portal>
      );
    }
  }

export default Particle;

我有以下组件来呈现此文件

class HomePage extends Component {
  componentWillMount() {
    window.scrollTo(0,0);
  }
  render() {
    return (
      <ScrollAnimation animateIn='fadeIn'>
        <Particles/>
      </ScrollAnimation>

我应该做些什么来重新渲染它？

Answer 1

啊......这是CSS，没有意识到粒子的背景正在受到影响。

react-portal加载数据然后不重新渲染

1 个答案: