如何让react-tsparticles粒子特效仅在指定React组件容器内渲染

1. 核心配置修改（最常见原因） #

react-tsparticles默认开启全屏渲染模式，会强制将粒子canvas设置为fixed定位铺满整个视口，无论你组件放在什么位置都会覆盖全页，需要先在粒子配置中关闭全屏模式：

const particlesOptions: ISourceOptions = {
  fullScreen: {
    enable: false // 必须添加这一行关闭全屏
  },
  // 保留你原来的其他粒子配置项
}

2. 调整容器样式 #

你用来承载粒子的ParticlesContainer必须设置非static定位、明确宽高，以及溢出隐藏，避免粒子超出容器范围：

/* 对应ParticlesContainer组件的样式 */
#particles-js {
  position: relative; /* 可以改为absolute/fixed，只要不是默认的static即可 */
  width: 100%;
  height: 500px; /* 根据你的需求设置容器高度，也可以设为100%继承父级高度 */
  overflow: hidden;
}

如果需要业务内容叠加在粒子上层，给内容外层加position: relative和z-index: 2即可，粒子canvas默认z-index为0。

3. 简化组件结构 #

不需要额外传递container属性，直接将Particles组件嵌套在容器内部即可正常渲染：

const Block = () => {
  return (
    <MiddleBlockSection>
      <ParticlesContainer id="particles-js">
        <Particles options={particlesOptions as ISourceOptions}/>
      </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>
  );
}

4. 如果你坚持使用container属性的正确写法 #

如果需要手动指定挂载容器，要注意必须传递ref的current属性，且要等待ref挂载完成后再渲染Particles组件，避免首次渲染时ref为null导致挂载失败：

const Block = () => {
  const particlesContainer = useRef<HTMLDivElement>(null);
  const [isContainerMounted, setIsContainerMounted] = useState(false);

  useEffect(() => {
    if (particlesContainer.current) {
      setIsContainerMounted(true);
    }
  }, []);

  return (
    <MiddleBlockSection>
      <ParticlesContainer ref={particlesContainer} id="particles-js"></ParticlesContainer>
      {isContainerMounted && (
        <Particles 
          container={particlesContainer.current}
          options={particlesOptions as ISourceOptions}
        />
      )}
      {/* 原有业务内容 */}
    </MiddleBlockSection>
  );
}

内容的提问来源于stack exchange，提问作者Diogo