在反应中使用路口观察器

Question

当 elementB 离开视口时，我需要更改 elementA。我有 html 元素

<header id="header">
<div id="banner">

和js：

const banner = document.getElementById('banner');
const nav = document.getElementById('navbar');
const callback = ([entry]) => {
  const { isIntersecting } = entry;
  nav.classList.toggle('navOpacity', !isIntersecting);
};
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(banner);

有效。接下来我尝试在 React 组件中使用它：

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      isInView: null,
      BannerRef: React.createRef()
    };
  }

  componentDidMount() {
    const callback = ([entry]) => {
      const { isIntersecting } = entry;
      this.setState({ isInView: !isIntersecting });
    };

    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.0
    };

    const observer = new IntersectionObserver(callback, options);

    observer.observe(
      this.BannerRef
    );
  }

  render() {
    const { isInView, BannerRef } = this.state;
    return (
      <>
        <Nav isInView={isInView} />
        <Banner RefProp={BannerRef} />
        <ContentNews />
        <ContentBelow />
        <Footer />
      </>
    );
  }
}

在 Banner 组件中，ref 位于第一个 <>

但未捕获类型错误：无法在“IntersectionObserver”上执行“观察”：参数 1 不是“元素”类型。

请帮助我了解它是如何工作的。