顆粒的反應粒子-JS沒有更新的數量

Question

我：

return (
    <Particles 
    style={{ 
     position: 'absolute', 
     top: 0, 
     left: 0, 
     right: 0, 
     bottom: 0, 
     zIndex: -1 
    }} 
    params={{ 
     number: { 
     value: 400, 
     density: { 
      enable: true, 
      value_area: 800 
     } 
     }, 
     line_linked: { 
     enable: true, 
     distance: 150, 
     color: "#ffffff", 
     opacity: 0.4, 
     width: 1 
     }, 
     "shape": { 
     "type": "circle", 
     "stroke": { 
      "width": 0, 
      "color": "#000000" 
     }, 
     polygon: { 
      nb_sides: 7 
     } 
     }, 
     "interactivity": { 
     "detect_on": "canvas", 
     "events": { 
      "onhover": { 
      "enable": true, 
      "mode": "grab" 
      }, 
      "onclick": { 
      "enable": true, 
      "mode": "push" 
      }, 
      "resize": true 
     }, 
     "modes": { 
      "grab": { 
      "distance": 400, 
      "line_linked": { 
       "opacity": 1 
      } 
      }, 
      "repulse": { 
      "distance": 200, 
      "duration": 0.4 
      } 
     } 
     }, 
     "retina_detect": true 
    }} /> 

不管我怎麼做高number.value，在屏幕上的顆粒數量只是不會增加。任何想法我做錯了什麼？

Answer 1

您錯過了將這些屬性放入顆粒。另外，從風格刪除的z-index屬性或將其設置爲將顯示在顆粒

particles: { 
    number: { 
    value: 400, 
    density: { 
     enable: true, 
     value_area: 800 
    } 
    }, 
    line_linked: { 
    enable: true, 
    distance: 150, 
    color: "#ffffff", 
    opacity: 0.4, 
    width: 1 
    }, 
    "shape": { 
    "type": "circle", 
    "stroke": { 
     "width": 0, 
     "color": "#000000" 
    }, 
    polygon: { 
     nb_sides: 7 
    } 
    } 
}, 
    "interactivity": { 
    "detect_on": "canvas", 
    "events": { 
     "onhover": { 
     "enable": true, 
     "mode": "grab" 
     }, 
     "onclick": { 
     "enable": true, 
     "mode": "push" 
     }, 
     "resize": true 
    }, 
    "modes": { 
     "grab": { 
     "distance": 400, 
     "line_linked": { 
      "opacity": 1 
     } 
     }, 
     "repulse": { 
     "distance": 200, 
     "duration": 0.4 
     } 
    } 
    }, 
    "retina_detect": true