[英]TSparticles React render particles only inside component
I have a React component and I want to render the particles only inside that component.我有一个 React 组件,我只想在该组件内渲染粒子。 I do not want to use the particles as background to the whole page, but inside only that component (div element), as can be seen on dogecoin.com .
我不想将粒子用作整个页面的背景,而只是在该组件(div 元素)内部,如dogecoin.com 所示。 However I am having serious troubles doing this.
但是,我在这样做时遇到了严重的麻烦。 The code I use is as follows:
我使用的代码如下:
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>
);}
So what I do is that I basically create a ref for the container and try to use it as a ref for particlesjs.所以我所做的是我基本上为容器创建了一个 ref 并尝试将它用作particlesjs 的 ref。
Part of the code where this happens:发生这种情况的部分代码:
<Particles container= {particlesContainer}
I also tried to put the component inside, in pseudocode like this:我还尝试将组件放入内部,伪代码如下:
<ParticlesContainer> <Particles/> </ParticlesContainer>
But that does not work as well.但这也行不通。 The particles still render on the background of the whole page and I wanted it to render only inside the container component.
粒子仍然呈现在整个页面的背景上,我希望它只呈现在容器组件内。
The npm package I am using is react-tsparticles .我使用的 npm package 是react-tsparticles 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.