reactjs - react : check if elements in different components overlap

Question

我正在查看检查元素是否重叠的许多答案，但它们不适用。

我有一个包装器组件，它有一个位置固定的 header 和子组件

const Wrapper = ({ children }) => {

  return (
    <>
    <Header/>
    {children}
    </>
  )
};

export default Wrapper

我需要知道标题何时与几个不同页面(子页面)中的某些部分重叠，以便更改标题颜色

我试图在包装器组件中进行检测，但元素不存在或容器无法访问

我是否需要将 refs 从 wrapper 一路传递给所有的 child ？有更简单的方法吗？

谢谢

Answer 1

我可以想到几种方法，一种是你提到的那种，传递引用并进行大量计算，下面还有一些其他方法。

页面的硬编码高度

这基本上可以通过在你的头文件中有一个大的 switch case 并检查你的滚动目标的偏移滚动位置来工作。

getBackgroundColor = (scrollPosition) => {
    switch (true) {
        case scrollPosition <= $('#page1').height:
            return 'red'
        case scrollPosition <= $('#page1').height + $('#page2').height:
            return 'blue'
        case scrollPosition <= $('#page1').height + $('#page2').height + $('page3').height
            return 'green'
        default:
            return 'yellow'
    }
}

这有明显的缺陷，一个是，如果页面内容是动态的或经常变化，它可能不起作用，每次重新渲染检查高度可能会导致回流问题，这需要知道页面上的页面 ID。 (注意:这个片段只是为了证明概念，它需要 tweeks)。

路口观察器(推荐方式)

Intersection observer是一个很棒的 AP​​I，它允许您以高效的方式观察元素，并通过不断测量的替代方式减少布局抖动这是我用 React 和 Intersection Observer 制作的示例，https://codesandbox.io/s/relaxed-spence-yrozp .如果你有数百个目标，这可能不是最好的，但我没有对此进行任何基准测试，所以不确定。它也被认为是“实验性的”，但具有良好的浏览器支持(不是 IE)。

这里是下面的大部分代码和框，只是为了获得一个想法。

React.useEffect(() => {
    let headerRect = document.getElementById("header").getBoundingClientRect();
    let el = document.getElementById("wrapper");
    let targets = [...document.getElementsByClassName("block")];

    let callback = (entries, observer) => {
      entries.forEach(entry => {
        let doesOverlap = entry.boundingClientRect.y <= headerRect.bottom;
        if (doesOverlap) {
          let background = entry.target.style.background;
          setColor(background);
        }
      });
    };

    let io = new IntersectionObserver(callback, {
      root: el,
      threshold: [0, 0.1, 0.95, 1]
    });
    targets.forEach(target => io.observe(target));

    return () => {
      targets.forEach(target => io.unobserve(target));
    };
  }, []);

另外请注意，这不是最“ react ”的做事方式，因为它在很大程度上依赖于 ids，但是您可以通过在我使用 dom 选择的任何地方传递 refs 来解决这个问题，但是可能变得笨重。