TSparticles React 仅在组件内部渲染粒子答案

【问题标题】：TSparticles React render particles only inside componentTSparticles React 仅在组件内部渲染粒子
【发布时间】：2022-01-04 05:05:46
【问题描述】：

我有一个 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。

【问题讨论】：

标签： javascript reactjs particles.js react-particles-js

【解决方案1】：

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

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

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

【讨论】：