在Gatsby中使用ParticleJS

Question

我正在对gatsby使用ParticleJS React组件。

我从获取npm install react-particles-js开始。

我从一个非常简单的例子开始：

import React from "react"
import Particles from 'react-particles-js';

export default () => (
  <div>
  <Particles params={{
        "particles": {
            "number": {
                "value": 50
            },
            "size": {
                "value": 3
            }
        },
        "interactivity": {
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                }
            }
      }
    }}/>
  </div>

)

呈现的HTML如下所示：

<div>
   <div id="tsparticles">
      <canvas class="tsparticles-canvas-el" width="3584" height="1792" style="width: 100%; height: 100%;">
      </canvas>
   </div>
</div>

尽管如此，仍然没有显示任何内容！我是不是漏掉了什么？

Answer 1

一切都已经按预期进行了。请注意，默认情况下，画布显示的粒子是白色的。因此，如果背景像我这样是白色的，它们将是不可见的。

将粒子更改为黑色，它们就会出现。下面是一个最小的工作示例：

<Particles
      params={{
        particles: {
          color: {
            value: "#000000"
          }
        }
      }}
    />

Answer 2

在Gatsby中使用该库是一个已知问题，但是也有解决方法，您可以检查这个GitHub问题：https://github.com/Wufe/react-particles-js/issues/23，下面是一个复制品：https://codesandbox.io/s/goofy-lake-i0c7z?file=/src/pages/index.js

Answer 3

用return包装它，就像

export default () => (
  return (
/** yours here) 
)