ReactJS如何在切换列表项上添加活动类并将状态设置为true或false

ReactJS是一个流行的JavaScript库，用于构建用户界面。它提供了一种声明式的方式来创建可复用的UI组件，并通过组件间的数据流动来实现高效的页面更新。

要在切换列表项上添加活动类并将状态设置为true或false，可以使用ReactJS的状态管理机制和事件处理函数来实现。

首先，需要在组件的状态中添加一个属性来表示当前活动项的索引或标识。可以使用useState钩子函数来定义并初始化该状态：

import React, { useState } from 'react';

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

  // 点击列表项时更新活动项状态
  const handleClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <ul>
      {props.items.map((item, index) => (
        <li
          key={index}
          className={index === activeIndex ? 'active' : ''}
          onClick={() => handleClick(index)}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}

export default ListItem;

在上述代码中，activeIndex表示当前活动项的索引，初始值为null。setActiveIndex函数用于更新activeIndex的值。

在ListItem组件的返回结果中，通过遍历props.items数组来渲染列表项。在每个列表项的className属性中，根据当前索引是否与activeIndex相等来判断是否添加活动类。

当列表项被点击时，会触发handleClick函数，将对应的索引作为参数传递给setActiveIndex函数，从而更新活动项的状态。

这样，当用户点击列表项时，ReactJS会根据状态的变化重新渲染组件，并根据活动项的索引来添加或移除活动类。

关于ReactJS的更多信息和使用方法，可以参考腾讯云的ReactJS产品介绍页面：ReactJS产品介绍。