标签: react-particles-js

我有一个 React 组件，我想仅在该组件内部渲染粒子。我不想使用粒子作为整个页面的背景，但仅在该组件（div 元素）内使用，如dogecoin.com上所示。然而我在做这件事时遇到了严重的麻烦。我使用的代码如下：

const Block = () => {
const  particlesContainer= useRef(null);

return (
    <MiddleBlockSection>
       <Particles container= {particlesContainer} options={particlesOptions as ISourceOptions}/>
      <ParticlesContainer ref={particlesContainer} id="particles-js"></ParticlesContainer>
      <Slide direction="up" duration={500}>
      
        <Row justify="center" align="middle">
          <ContentWrapper>
            <Col lg={24} md={24} sm={24} xs={24}>
              <h6>{t(title)}</h6>
            </Col>
          </ContentWrapper>
        </Row>
      </Slide>
    </MiddleBlockSection>
  );}

所以我所做的基本上是为容器创建一个引用，并尝试将其用作 keywords.js 的引用。

发生这种情况的部分代码：

<Particles container= {particlesContainer}

我还尝试将组件放入其中，伪代码如下：

<ParticlesContainer> <Particles/> </ParticlesContainer> 

但这也行不通。粒子仍然在整个页面的背景上渲染，我希望它仅在容器组件内部渲染。

我使用的 npm 包是react-tsarticles。

以下是该网站工作示例的链接：https : //codesandbox.io/s/eloquent-kapitsa-kk1ls

我一直试图让粒子移动到屏幕的整个高度，但我无法让它们一直走到底部。我尝试改变不同<div>元素的高度并改变粒子的渲染方式，但没有成功。