使用IntersectionObserver在React中滚动时突出显示侧栏导航项时出现问题

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

const Sidebar = () => {
  const [activeNavItem, setActiveNavItem] = useState(null);
  const observer = useRef(null);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.5, // 目标元素可见度达到50%时触发回调
    };

    observer.current = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveNavItem(entry.target.id);
        }
      });
    }, options);

    // 监测所有目标元素
    const targets = document.querySelectorAll('.nav-item');
    targets.forEach((target) => {
      observer.current.observe(target);
    });

    return () => {
      // 清除观察者
      observer.current.disconnect();
    };
  }, []);

  return (
    <div className="sidebar">
      <ul>
        <li className={activeNavItem === 'item1' ? 'active' : ''} id="item1">
          Item 1
        </li>
        <li className={activeNavItem === 'item2' ? 'active' : ''} id="item2">
          Item 2
        </li>
        <li className={activeNavItem === 'item3' ? 'active' : ''} id="item3">
          Item 3
        </li>
      </ul>
    </div>
  );
};

export default Sidebar;