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

在React.js中为每个li元素切换类，可以通过以下步骤实现：

首先，在React组件中定义一个状态变量，用于控制li元素的类切换。可以使用useState钩子函数来创建状态变量。

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>
  );
}

接下来，为每个li元素添加点击事件处理函数，用于更新状态变量的值。可以使用onClick属性来绑定事件处理函数。

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>
  );
}