react-portal加载数据，然后不重新呈现

Question

我一直在尝试将ParticleJS渲染为我的create-react-app的根目录的背景，最初我已经成功地加载了它，但当改变路线然后再次访问主页时，这些粒子就消失了。下面是我的配置，如果我遗漏了什么，请告诉我。

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，没有意识到粒子的背景正在受到影响。