如何将组件放入Particle.js中？

Question

我试着将Particle包装在组件周围，但它不起作用。

import React from "react";
import { render } from "react-dom";
import Particles from "./Particles";
import "./index.css";
import Form from "./form";

const styles = {
  root: {
    fontFamily: "sans-serif",
    textAlign: "center",
    height: "100%",
    background: "#222",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }
};

const App = () => (
  <div style={styles.root}>
    <Particles>
      <Form />
    </Particles>
  </div>
);

render(<App />, document.getElementById("root"));

这是重新创建的代码框链接：https://codesandbox.io/s/particle-js-background-forked-woypk?file=/src/index.js:0-519

Answer 1

我在这里更新了你的CodeSandbox：https://codesandbox.io/s/particle-js-background-forked-fsvhe?file=/src/form.js

我已经更新了粒子组件，因为您使用了一个不推荐的包(react-particles-js)。

粒子组件不支持内部任何东西，您只需将其放置在其他组件中，并使用CSS来正确定位它。

更新后的粒子组件react-tsparticles默认设置为全屏，但在示例选项中，我将其设置为false，仅包含在Form组件中。