如何在React中隐藏child3区域内的绝对定位child1组件

我需要在React项目中实现：让绝对定位的child1组件在child3区域内不可见，但在child2区域保持正常显示。此前尝试用背景覆盖的方案，但存在前端适配问题，求可行的解决办法。

相关代码 #

JSX代码

<main className="mainbg">
    <div className="child1">
              a component along the page. from top to bottom. see css.
    </div>
    {/* <Awesomeslider> */}
    <div className="child2">
         firstslide
    </div>
    <div className="child3">
        rightslide
    </div>
    {/* </Awesomeslider> */}
</main>

// 使用React.js的Awesomeslider组件

CSS代码

.mainbg {
    width: 100vw;
    height: fit-content;
    display: block;
    background: linear-gradient(/* 页面包含滑块区域的渐变背景 */);
}
.child1 {
    position: absolute;
    top: 0;
    width: 50vw;              /* 会设置为从main到child2的全屏宽度，但必须在child3中隐藏 */
    margin: auto;
}
.child2 {
    width: 100vw;
    height: fit-content;            /* child1在此区域可见 */
}

.child3 {
    width: 100vw;
    height: fit-content;              /* child1在此区域不可见 */
}

HTML入口

<div id="root"></div>

可行解决方案 #

方案1：CSS clip-path 裁剪法 #

直接对child1进行区域裁剪，只保留child2范围内的可见部分，适配性强且无需额外元素。

静态高度场景（child2高度固定）

修改child1的CSS：

.child1 {
    position: absolute;
    top: 0;
    width: 50vw;
    margin: auto;
    /* 假设child2的高度为80vh，裁剪出从顶部到child2底部的区域 */
    clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 80vh);
}

动态高度场景（child2高度不确定）

通过React的useRef获取child2的DOM元素，动态计算高度后设置裁剪路径：

import { useEffect, useRef } from 'react';

const YourComponent = () => {
  const child1Ref = useRef(null);
  const child2Ref = useRef(null);

  useEffect(() => {
    const updateClipPath = () => {
      if (child1Ref.current && child2Ref.current) {
        const child2Bottom = child2Ref.current.offsetTop + child2Ref.current.offsetHeight;
        child1Ref.current.style.clipPath = `polygon(0 0, 100% 0, 100% ${child2Bottom}px, 0 ${child2Bottom}px)`;
      }
    };

    updateClipPath();
    // 监听窗口 resize 动态更新
    window.addEventListener('resize', updateClipPath);
    return () => window.removeEventListener('resize', updateClipPath);
  }, []);

  return (
    <main className="mainbg">
      <div className="child1" ref={child1Ref}>
        a component along the page. from top to bottom. see css.
      </div>
      <div className="child2" ref={child2Ref}>
        firstslide
      </div>
      <div className="child3">
        rightslide
      </div>
    </main>
  );
};

方案2：z-index + 继承背景覆盖法 #

解决原背景覆盖方案的适配问题，让child3继承父元素的背景，同时通过层级覆盖child1：

修改child3的CSS：

.child3 {
    width: 100vw;
    height: fit-content;
    position: relative; /* 必须设置相对定位才能生效z-index */
    z-index: 1; /* 层级高于child1（默认z-index为0） */
    background: inherit; /* 继承父元素的渐变背景，避免适配偏差 */
}

这个方案最简单，无需JS介入，只要确保child3的层级高于child1即可。

方案3：Intersection Observer 动态控制显示 #

利用浏览器的Intersection Observer API监听child3是否进入视口，动态切换child1的可见状态：

import { useEffect, useRef, useState } from 'react';

const YourComponent = () => {
  const child1Ref = useRef(null);
  const child3Ref = useRef(null);
  const [isChild3InView, setIsChild3InView] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        setIsChild3InView(entry.isIntersecting);
      });
    }, { threshold: 0.1 }); // 当child3进入10%视口时触发

    if (child3Ref.current) {
      observer.observe(child3Ref.current);
    }

    return () => {
      if (child3Ref.current) {
        observer.unobserve(child3Ref.current);
      }
    };
  }, []);

  return (
    <main className="mainbg">
      <div 
        className={`child1 ${isChild3InView ? 'hidden-in-child3' : ''}`}
        ref={child1Ref}
      >
        a component along the page. from top to bottom. see css.
      </div>
      <div className="child2">
        firstslide
      </div>
      <div className="child3" ref={child3Ref}>
        rightslide
      </div>
    </main>
  );
};

对应的CSS：

.hidden-in-child3 {
  opacity: 0;
  pointer-events: none; /* 隐藏时禁止交互 */
  transition: opacity 0.3s ease; /* 可选：添加过渡动画 */
}

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