如何将组件放入 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"));

这是重新创建的 codesandbox link: 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 组件

如何将组件放入 Particle.js？

How can I put component inside the Particle.js?

javascript

npm

reactjs