在组件呈现函数内迭代的组件中的列上设置活动类

import React, { useState } from 'react';

const MyComponent = () => {
  const columns = ['Column 1', 'Column 2', 'Column 3'];
  const [activeColumnIndex, setActiveColumnIndex] = useState(0);

  return (
    <div>
      {columns.map((column, index) => (
        <div
          key={index}
          className={`column ${index === activeColumnIndex ? 'active' : ''}`}
          onClick={() => setActiveColumnIndex(index)}
        >
          {column}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;