如何在React.js中为每个li元素切换类？

import React, { useState } from 'react';

function MyComponent() {
  const [activeIndex, setActiveIndex] = useState(null);

  // 其他组件代码

  return (
    <ul>
      <li className={activeIndex === 0 ? 'active' : ''}>Item 1</li>
      <li className={activeIndex === 1 ? 'active' : ''}>Item 2</li>
      <li className={activeIndex === 2 ? 'active' : ''}>Item 3</li>
      {/* 其他li元素 */}
    </ul>
  );
}

function MyComponent() {
  const [activeIndex, setActiveIndex] = useState(null);

  const handleItemClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <ul>
      <li className={activeIndex === 0 ? 'active' : ''} onClick={() => handleItemClick(0)}>Item 1</li>
      <li className={activeIndex === 1 ? 'active' : ''} onClick={() => handleItemClick(1)}>Item 2</li>
      <li className={activeIndex === 2 ? 'active' : ''} onClick={() => handleItemClick(2)}>Item 3</li>
      {/* 其他li元素 */}
    </ul>
  );
}