在react中仅使列表中单击的项目处于活动状态

import React, { useState } from 'react';

// 列表项组件
const ListItem = ({ item, isActive, onItemClick }) => {
  const handleClick = () => {
    onItemClick(item);
  };

  return (
    <div
      className={`list-item ${isActive ? 'active' : ''}`}
      onClick={handleClick}
    >
      {item.name}
    </div>
  );
};

// 列表组件
const List = ({ items }) => {
  const [activeItem, setActiveItem] = useState(null);

  const handleItemClick = (item) => {
    setActiveItem(item);
  };

  return (
    <div className="list">
      {items.map((item) => (
        <ListItem
          key={item.id}
          item={item}
          isActive={item === activeItem}
          onItemClick={handleItemClick}
        />
      ))}
    </div>
  );
};

// 使用示例
const App = () => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  return (
    <div>
      <h1>List</h1>
      <List items={items} />
    </div>
  );
};

export default App;