我如何（正確地）檢查元素是否在 React 的視口內？

Question

在功能性 React 組件中，我正在嘗試檢查視口內是否有號召性用語按鈕（不同的組件）。 如果不是，我想在視口底部顯示一個固定的號召性用語按鈕，它會顯示/隱藏，具體取決於另一個按鈕是否可見。

我可以使用 Javascript 和 React 鈎子的組合來做到這一點，但是盡管代碼在我的應用程序的某些組件中有效，但在其他組件中不起作用； 我猜是由於反應生命周期。

我也知道這不是我在反應中應該做的事情的方式，所以更願意以適當的“反應方式”獲得相同的結果。

我一直在考慮使用 refs，但理想情況下希望避免將我的功能組件更改為 class，因為我想使用反應掛鈎來顯示/隱藏固定的 cta。 但是，如果這是獲得我想要的功能的要求，我可以為此使用 go。

這是我到目前為止所得到的 - 基本上，我想用反應方法替換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)
    );
  };

如上所述，這個 function 在應用程序的某些區域沒有問題，但在其他區域則沒有； 我收到Cannot read property 'getBoundingClientRect' of null錯誤。 我很驚訝它居然能起作用，但我不想修改它來嘗試讓它在任何地方都能起作用，我想正確地重寫它。

一如既往，我們將不勝感激任何幫助。 謝謝。

Answer 1

我能夠通過 depedency react-visibility-sensor@5.1.1做到這一點

我按照此鏈接中的教程進行操作，對我來說效果很好。

我不知道這是否是正確的方法，但它確實有效！

這是鏈接https://www.digitalocean.com/community/tutorials/react-components-viewport-react-visibility-sensor

我將舉一個例子，以防萬一以前的鏈接消失了。

import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class VisibilitySensorImage extends Component {
  state = {
    visibility: false
  }

  render() {
    return (
      <VisibilitySensor
        onChange={(isVisible) => {
          this.setState({visibility: isVisible})
        }}
      >
        <img
          alt={this.props.alt}
          src={this.props.src}
          style={{
            display: 'block',
            maxWidth: '100%',
            width: '100%',
            height: 'auto',
            opacity: this.state.visibility ? 1 : 0.25,
            transition: 'opacity 500ms linear'
          }}
        />
      </VisibilitySensor>
    );
  }
}

export default VisibilitySensorImage;