访问react组件中的正文以使用scrollspy

constructor(props) {
  super(props);
  this.state = {
    activeSection: null,
  };
}

render() {
  return (
    <div>
      <section id="section1">Section 1</section>
      <section id="section2">Section 2</section>
      <section id="section3">Section 3</section>
    </div>
  );
}

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

handleScroll = () => {
  const sections = document.querySelectorAll('section');
  let activeSection = null;

  sections.forEach((section) => {
    const rect = section.getBoundingClientRect();
    if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
      activeSection = section.id;
    }
  });

  this.setState({ activeSection });
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.handleScroll);
}

render() {
  const { activeSection } = this.state;

  return (
    <div>
      <nav>
        <ul>
          <li className={activeSection === 'section1' ? 'active' : ''}><a href="#section1">Section 1</a></li>
          <li className={activeSection === 'section2' ? 'active' : ''}><a href="#section2">Section 2</a></li>
          <li className={activeSection === 'section3' ? 'active' : ''}><a href="#section3">Section 3</a></li>
        </ul>
      </nav>

      <section id="section1">Section 1</section>
      <section id="section2">Section 2</section>
      <section id="section3">Section 3</section>
    </div>
  );
}