javascript - TSparticles React 仅在组件内部渲染粒子

Question

我有一个 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>
  );}

所以我所做的就是基本上为容器创建一个 ref 并尝试将其用作particlesjs 的 ref。

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

<Particles container= {particlesContainer}

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

<ParticlesContainer> <Particles/> </ParticlesContainer> 

但这也不起作用。粒子仍然呈现在整个页面的背景上，我希望它只呈现在容器组件内。

我使用的 npm 包是 react-tsparticles .

Answer 1

这个问题是两天前在仓库中提出的here .

要禁用粒子全屏功能，您只需在如下选项中禁用它:

{
    fullScreen: { enable: false }
    /* all other options */
}