gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 01:06:01 26 4
gpt4 key购买 nike

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

最佳答案

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

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

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

关于javascript - TSparticles React 仅在组件内部渲染粒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70119282/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com