Question

在功能性React组件中，我试图检查号召性用语按钮（其他组件）是否在视口内。如果不是这样，我想在视口的底部显示一个固定的号召性用语按钮，根据其他按钮是否可见，该按钮会显示/隐藏。

我可以结合使用Javascript和react挂钩来做到这一点，但是尽管代码在我的应用程序的某些组件中有效，但在其他组件中则无效；我猜是由于反应生命周期。

我也意识到这不是我应该做的事情，因此，我宁愿以适当的“反应方式”达到相同的结果。

我一直在使用refs，但理想情况下是希望避免将功能组件更改为类，因为我想对固定cta的显示/隐藏使用react钩子。但是，如果这是获得我想要的功能的要求，则可以这样做。

这是我到目前为止的内容-基本上，我想用react方法替换document.querySelector：

  useEffect(() => {
    const CTA = document.querySelector('#CTANextSteps');
    const ApplyStyle = () => (isInViewport(CTA) ? setVisible(false) : setVisible(true));
    ApplyStyle();
    window.addEventListener('scroll', ApplyStyle);
    window.addEventListener('resize', ApplyStyle);
    return function cleanup() {
      window.removeEventListener('scroll', ApplyStyle);
      window.removeEventListener('resize', ApplyStyle);
    };
  });

  const isInViewport = (elem) => {
    const bounding = elem.getBoundingClientRect();
    return (
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  };

如上所述，此功能可在应用程序的某些区域正常运行，但在其他区域则无效；我收到一个Cannot read property 'getBoundingClientRect' of null错误。令我感到惊讶的是，它完全奏效了，但是我不想修改它以尝试使其在任何地方都可以使用，而是想正确地重写它。

一如既往，任何帮助将不胜感激。谢谢。

如何（正确）检查React中的元素是否在视口内？

0 个答案: