如何使用react在锚链路上设置活动类

import React, { useState } from 'react';

function AnchorLinks() {
  const [activeLink, setActiveLink] = useState('');

  const handleLinkClick = (linkName) => {
    setActiveLink(linkName);
  };

  return (
    <div>
      <a
        href="#section1"
        className={activeLink === 'section1' ? 'active' : ''}
        onClick={() => handleLinkClick('section1')}
      >
        Section 1
      </a>
      <a
        href="#section2"
        className={activeLink === 'section2' ? 'active' : ''}
        onClick={() => handleLinkClick('section2')}
      >
        Section 2
      </a>
      <a
        href="#section3"
        className={activeLink === 'section3' ? 'active' : ''}
        onClick={() => handleLinkClick('section3')}
      >
        Section 3
      </a>
    </div>
  );
}

export default AnchorLinks;